{"owner":"htmlstreamofficial","repo":"preline","hasSkills":true,"totalSkillsCount":39,"totalTokensCount":106091,"categories":["anthropic-skill","plugin-manifest"],"hasMcp":false,"mcpConfig":null,"found":["skills/preline-mcp/SKILL.md","skills/preline-mcp/agents/openai.yaml","skills/preline-mcp/references/catalog-map.md","skills/preline-mcp/references/composite-layouts.md","skills/preline-mcp/references/mcp-tools-reference.md","skills/theme-generator/SKILL.md","skills/theme-generator/docs/final-output-style.md","skills/theme-generator/docs/palette-guidance.md","skills/theme-generator/docs/token-reference.md","skills/theme-generator/docs/validation-checklist.md","skills/theme-generator/docs/workflow.md","skills/theme-generator/examples.md","src/plugins/accordion/README.md","src/plugins/carousel/README.md","src/plugins/collapse/README.md","src/plugins/combobox/README.md","src/plugins/copy-markup/README.md","src/plugins/datatable/README.md","src/plugins/datepicker/README.md","src/plugins/dropdown/README.md","src/plugins/file-upload/README.md","src/plugins/input-number/README.md","src/plugins/layout-splitter/README.md","src/plugins/overlay/README.md","src/plugins/pin-input/README.md","src/plugins/range-slider/README.md","src/plugins/remove-element/README.md","src/plugins/scroll-nav/README.md","src/plugins/scrollspy/README.md","src/plugins/select/README.md","src/plugins/stepper/README.md","src/plugins/strong-password/README.md","src/plugins/tabs/README.md","src/plugins/textarea-auto-height/README.md","src/plugins/theme-switch/README.md","src/plugins/toggle-count/README.md","src/plugins/toggle-password/README.md","src/plugins/tooltip/README.md","src/plugins/tree-view/README.md"],"skills":{"skills/preline-mcp/SKILL.md":"---\nname: preline-mcp\ndescription: Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions \"preline\", says \"/preline\", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.\n---\n\n# Preline MCP\n\n## Intent\n\nUse this skill to integrate Preline UI components and blocks into HTML files via the Preline MCP server. The server exposes 6 tools that return integration-ready HTML, CSS, and JS.\n\nActivate when:\n- User says \"preline\", \"add preline\", \"/preline\", \"use preline\"\n- User asks for a Tailwind CSS component from the Preline library\n- User asks for a block (ready-made page section) or a starter page\n\n## Defaults\n\n- **Never guess slugs.** All section, component, and category identifiers are exact kebab-case strings. Always discover them via `components_list` or `blocks_categories` first.\n- **One at a time.** Retrieve one component or block, integrate it fully, then move to the next.\n- **Always read the target file** before inserting anything.\n- Call `components_list({ section: \"\" })` when the component type is known - this keeps the response small. Omit section only when unsure.\n\n## Decision: Component vs Block\n\n| User says | Use |\n|---|---|\n| \"component\" / \"components\" | Component workflow |\n| \"block\" / \"blocks\" (or \"example\" / \"examples\") | Block workflow |\n| Ambiguous | Use judgment; blocks give more complete results |\n\n## Clarifying Vague Requests\n\nAsk the user to pick instead of guessing in either of these cases:\n\n- **Abstract request.** Too abstract to confidently map onto one category/section, let alone one block/component - e.g. \"give me something for a pricing page\", \"I need a nice form\", \"show me a dashboard example\". Start at step 1 below.\n- **Tied candidates.** The request is concrete enough to reach a single category/section, but `blocks_in_category` / `components_list({ section })` still leaves 2+ candidates whose titles + descriptions satisfy every criterion the request named about equally well (same layout/feature/style class), with nothing in the request to break the tie. Skip straight to step 3 below with just the tied candidates.\n\nIf exactly one candidate matches everything the request names (\"a basic accordion\", \"the SaaS hero with tabs\"), skip straight to the normal workflow - don't interrogate the user for things you can already resolve, and don't ask just to be safe when one option is clearly the best fit.\n\nAll clarifying questions and lists are in **English by default** - switch to the user's language only once they write to you in it.\n\n**Blocks:**\n1. **Ask which category fits.** Call `blocks_categories()` and present the relevant `mainSection / subSection / category` paths with their titles and descriptions - the catalog carries a one-line description for every category, so present it directly rather than inventing your own summary.\n2. **Try to resolve in one round.** If the user's reply both names a category *and* describes the item distinctively enough to identify a single match (a specific layout, feature, or style), call `blocks_in_category` to confirm the exact ID and go straight to `single_block` - skip step 3 entirely.\n3. **Otherwise, ask which block fits best.** Call `blocks_in_category({ mainSection, subSection, category })`, list the block titles + descriptions - or just the tied candidates, for the case above - and ask the user to pick the one closest to their needs.\n4. **Fetch and integrate** the chosen block with `single_block`.\n\n**Components - same shape, sections instead of categories:**\n1. Ask which **section** fits (`components_list()` for the full list, or `components_list({ section })` once you can infer one).\n2. If the reply names a section *and* describes the component distinctively enough → resolve directly via `single_component` (lean on `relative` metadata - see Smart Component Selection - to land on the right default/variant).\n3. Otherwise list the components in that section (titles + descriptions, with `relative.category` groupings where present - or just the tied candidates, for the case above) and ask which fits best.\n4. Fetch and integrate with `single_component`.\n\nKeep each round to one focused question with a short, scannable list - that beats an open \"what do you want?\" and beats guessing a slug just to avoid asking.\n\n## Composite & Layout Requests\n\nWhen a request describes **more than a single component** - several pieces, a region, a full page, or an app shell - don't fetch ad-hoc. Plan the whole result first, then fetch and integrate one node at a time. The same steps apply to any shape: a dashboard, a settings page, a product page, a multi-step form, \"a card/section/layout with X, Y and Z\", etc.\n\n1. **Lock cross-cutting constraints first.** Anything that applies to the whole result - class system (theme tokens vs utilities → `isUtilityBased` / `theme`), shared surfaces/colors, spacing/density, repeated element states - decide once, up front. Keep it identical across every later fetch and edit.\n2. **Decompose into a tree:** containers → regions → leaf components. Write it down; each leaf is one fetch.\n3. **Discover every node - route, then confirm.** Use [references/catalog-map.md](references/catalog-map.md) to route: an abstract intent (a whole page/region/shell) → the right `blocks_categories` branch (reuse a ready-made block as the skeleton when one fits); each named element → the right `components_list({ section })`. The map only tells you *where to look* - always confirm the exact slug against the tool output before inserting.\n4. **Assemble outermost-first, one at a time.** The skeleton/outer container sets the shared surfaces and the script/init anchors; then fill inward region by region, integrating each fully (Integration Rules) before the next. Keep the returned classes, change **text only** - except the specific surfaces/colors/states the user asked to change. Apply every structural adaptation to the markup **before** writing it (see *Adapt before you write* in Integration Rules).\n5. **Verify** the finished result against the request, element by element.\n\nSee [references/composite-layouts.md](references/composite-layouts.md) for the expanded method and worked illustrations.\n\n## Workflow: Components\n\n```\n1. components_list({ section: \"\" }) → get valid component IDs\n2. single_component({ section, component }) → get HTML/CSS/JS\n3. Read target file\n4. Integrate HTML, CSS, scripts, init (see Integration Rules)\n5. Repeat from step 1 only after integration is complete\n```\n\n## Workflow: Blocks\n\n```\n1. blocks_categories() → get hierarchy\n2. blocks_in_category({ mainSection, subSection, category }) → get block IDs\n3. single_block({ mainSection, subSection, category, block }) → get HTML/CSS/JS\n4. Read target file\n5. Integrate HTML, CSS, scripts, init (see Integration Rules)\n6. Repeat from step 1 only after integration is complete\n```\n\n## Integration Rules\n\n**HTML** - insert where the user needs it.\n\n**CSS** (`` section):\n- MUST go inside ``, immediately before ``\n- NEVER place in `` or near ``\n\n**External scripts** (`` section):\n- The `` label is a response section marker - NOT a location in the target file\n- Placement algorithm: open target file, scan **upward** from ``, skipping blank lines, comments, and non-structural tags (``, ``, etc.)\n- The **first structural closing tag** you reach (``, ``, ``, ``, ``) is the anchor\n- Insert ``, ``, ``, ``), any non-HTML syntax\n4. The **first structural closing tag** reached (``, ``, ``, ``, ``, ``, ``) is the **anchor**\n5. Insert ALL `\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### Init (``)\n\n```html\n\n\n\n\n\n```\n\nIf `` already contains `\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/accordion` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/accordion\";\n```\n\n`@preline/accordion/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSAccordion from \"@preline/accordion/non-auto\";\n\nHSAccordion.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#accordion\");\nif (el) new HSAccordion(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for an accordion component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The example shows three accordion items within a group, with the first item open by default.\n\n```html\n
\n
\n \n
\n Accordion content that expands and collapses when the toggle button is clicked.\n
\n
\n\n
\n \n \n
\n\n
\n \n \n
\n
\n```\n\n**Structure Requirements:**\n- `hs-accordion-group`: Required wrapper container for all accordion items\n- `hs-accordion`: Required container for each accordion item\n- `hs-accordion-toggle`: Required button element that triggers expand/collapse\n- `hs-accordion-content`: Required container for collapsible content\n- Unique `id` attributes for each accordion item and its content\n- Proper ARIA attributes (`aria-expanded`, `aria-controls`, `aria-labelledby`, `role=\"region\"`)\n\n**Initial State:**\n- To have an accordion item open by default, add the `active` class to the `hs-accordion` element\n- For closed items, add the `hidden` class to the `hs-accordion-content` element\n\n## Configuration Options\n\n### Data Attributes\n\nData attributes are added directly to HTML elements to configure accordion behavior.\n\n| Attribute | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-accordion-always-open` | `hs-accordion-group` | boolean attribute | `false` (absent) | When present (boolean attribute), accordion items stay open when another item is opened. By default, opening one item closes others. Presence of attribute = `true`, absence = `false`. |\n\n**Example:**\n```html\n\n
\n \n
\n```\n\n### CSS Classes (Modifiers)\n\nCSS class modifiers use Tailwind-style syntax with `--` prefix to control behavior.\n\n| Class Modifier | Target Element | Values | Default | Description |\n| --- | --- | --- | --- | --- |\n| `--stop-propagation:*` | `hs-accordion-toggle` | `\"true\"` \\| `\"false\"` | `\"false\"` | When `\"true\"`, interrupts event propagation when toggle button is clicked. Useful when accordion is nested inside clickable elements. |\n| `--keep-one-open:*` | `hs-accordion-group` | `\"true\"` \\| `\"false\"` | `\"false\"` | When `\"true\"`, ensures at least one accordion item remains open at all times. Prevents closing the last open item. |\n\n**Example:**\n```html\n
\n \n
\n\n\n```\n\n### Required CSS Classes\n\nThese classes define the structure and must be present for the accordion to function.\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-accordion-group` | Container wrapper | Groups multiple accordion items together |\n| `hs-accordion` | Each accordion item container | Identifies an individual accordion item |\n| `hs-accordion-toggle` | Button element | The clickable element that expands/collapses content |\n| `hs-accordion-content` | Content container | The collapsible content area |\n\n### Optional CSS Classes\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-accordion-treeview-root` | Parent container | When present, activates treeview mode for hierarchical accordion structures |\n| `hs-accordion-selectable` | Elements inside treeview | When treeview mode is active, elements with this class become selectable |\n\n**Treeview Mode Example:**\n```html\n
\n
\n
\n \n
\n
Selectable item
\n
\n
\n
\n
\n```\n\n## JavaScript API\n\nThe `HSAccordion` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on an accordion instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `show()` | None | `boolean` | Opens the collapsed accordion item. Returns `false` if item is already open, `true` otherwise. If other items are open and `always-open` is not set, they will be closed. |\n| `hide()` | None | `boolean` | Collapses the currently open accordion item. Returns `false` if item is already closed or if `keep-one-open` is enabled and this is the last open item, `true` otherwise. |\n| `destroy()` | None | `void` | Destroys the accordion instance, removes all generated markup, classes, and event listeners. Use when removing accordion from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSAccordion` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSAccordion.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `{ id: string \\| number, element: HSAccordion } \\| HTMLElement \\| null` | Returns the accordion instance or element associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSAccordion` instance. If `isInstance` is `false` or omitted, returns the DOM element (`HTMLElement`). Returns `null` if accordion instance is not found. |\n| `HSAccordion.show(target)` | `target`: `HSAccordion \\| HTMLElement \\| string` (CSS selector) | `void` | Opens the accordion item identified by target. Accepts an accordion instance, DOM element, or CSS selector string. Static alternative to instance `show()` method. Only opens if item is not already open. |\n| `HSAccordion.hide(target)` | `target`: `HSAccordion \\| HTMLElement \\| string` (CSS selector) | `void` | Closes the accordion item identified by target. Accepts an accordion instance, DOM element, or CSS selector string. Static alternative to instance `hide()` method. Only closes if item is open and `keep-one-open` allows it. |\n\n### Usage Examples\n\n**Example 1: Using instance methods (public API)**\n```javascript\n// Create a new accordion instance\nconst accordion = new HSAccordion(document.querySelector('#hs-accordion'));\nconst showBtn = document.querySelector('#hs-show-btn');\nconst hideBtn = document.querySelector('#hs-hide-btn');\n\n// Open accordion programmatically\nshowBtn.addEventListener('click', () => {\n accordion.show();\n});\n\n// Close accordion programmatically\nhideBtn.addEventListener('click', () => {\n accordion.hide();\n});\n```\n\n**Example 2: Using static methods**\n```javascript\nconst showBtn = document.querySelector('#hs-show-btn');\nconst hideBtn = document.querySelector('#hs-hide-btn');\n\n// Open accordion using static method (no instance needed)\nshowBtn.addEventListener('click', () => {\n HSAccordion.show('#hs-accordion');\n});\n\n// Close accordion using static method\nhideBtn.addEventListener('click', () => {\n HSAccordion.hide('#hs-accordion');\n});\n```\n\n**Example 3: Getting instance and using methods (recommended pattern)**\n```javascript\n// Get the accordion instance\nconst instance = HSAccordion.getInstance('#hs-accordion', true);\n\nif (instance) {\n const { element } = instance; // element is the HSAccordion instance\n const showBtn = document.querySelector('#hs-show-btn');\n\n // Use instance methods\n showBtn.addEventListener('click', () => {\n element.show();\n });\n\n // Clean up when removing from DOM\n function removeAccordion() {\n element.destroy();\n }\n}\n```\n\n**Example 4: Destroying accordion instance**\n```javascript\nconst instance = HSAccordion.getInstance('#hs-accordion', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-accordion').remove();\n });\n}\n```\n\n## Events\n\nAccordion instances emit events that can be listened to for lifecycle hooks and custom behavior.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:beforeOpen` | Before accordion item opens | `HTMLElement` (current accordion element) | Fires immediately before the accordion item starts opening. Can be used to cancel or modify behavior. |\n| `on:open` | After accordion item opens | `HTMLElement` (current accordion element) | Fires after the accordion item has fully opened. Use for post-open actions like loading content. |\n| `on:beforeClose` | Before accordion item closes | `HTMLElement` (current accordion element) | Fires immediately before the accordion item starts closing. Can be used to cancel or modify behavior. |\n| `on:close` | After accordion item closes | `HTMLElement` (current accordion element) | Fires after the accordion item has fully closed. Use for cleanup or state updates. |\n\n### Event Usage Example\n\n```javascript\n// Get accordion instance\nconst instance = HSAccordion.getInstance('#hs-accordion', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen to open event\n element.on('open', (accordionElement) => {\n console.log('Accordion opened:', accordionElement);\n // Perform actions after accordion opens\n // e.g., load content, update UI, track analytics\n });\n\n // Listen to close event\n element.on('close', (accordionElement) => {\n console.log('Accordion closed:', accordionElement);\n // Perform cleanup or state updates\n });\n\n // Listen to beforeOpen event (can be used to cancel)\n element.on('beforeOpen', (accordionElement) => {\n console.log('About to open:', accordionElement);\n // Can add conditional logic here\n });\n\n // Listen to beforeClose event (can be used to cancel)\n element.on('beforeClose', (accordionElement) => {\n console.log('About to close:', accordionElement);\n // Can add conditional logic here\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Multiple Open Items\n\nAllow multiple accordion items to be open simultaneously.\n\n```html\n
\n
\n \n
Content 1
\n
\n\n
\n \n
Content 2
\n
\n
\n```\n\n### Pattern 2: Always Keep One Open\n\nEnsure at least one item is always open.\n\n```html\n
\n
\n \n
Content 1
\n
\n \n
\n \n
Content 2
\n
\n
\n```\n\n### Pattern 3: Programmatic Control\n\nControl accordion from external buttons.\n\n```html\n
\n
\n \n
Content here
\n
\n
\n\n\n\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/carousel/README.md":"# Carousel\n\nBuild carousels and sliders with Carousel JavaScript plugin.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/carousel) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/carousel.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Carousel component provides a flexible, feature-rich slider for displaying multiple items in a scrollable container. It supports autoplay, infinite loop, drag gestures, responsive breakpoints, and multiple display modes.\n\n**Key Features:**\n- Multiple slides in a scrollable container\n- Autoplay and infinite loop support\n- Drag/swipe gestures for navigation\n- Responsive breakpoints for different screen sizes\n- Multiple display modes (default, snap, bounded)\n- Programmatic control via JavaScript API\n- Keyboard navigation support\n- Customizable pagination dots\n\n## Installation\n\nTo get started, install Carousel plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/carousel\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/carousel */\n@source \"../node_modules/@preline/carousel/*.js\";\n@import \"./node_modules/@preline/carousel/variants.css\";\n@import \"./node_modules/@preline/carousel/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/carousel` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/carousel\";\n```\n\n`@preline/carousel/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSCarousel from \"@preline/carousel/non-auto\";\n\nHSCarousel.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#carousel\");\nif (el) new HSCarousel(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a carousel component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The carousel displays three slides with previous/next navigation buttons.\n\n```html\n
\n
\n
\n
\n 1\n
\n
\n 2\n
\n
\n 3\n
\n
\n
\n\n \n \n
\n```\n\n**Structure Requirements:**\n- `data-hs-carousel`: Required on the container element, contains configuration options\n- `hs-carousel`: Required wrapper for slides collection, must contain `overflow-hidden` class\n- `hs-carousel-body`: Required slides container\n- `hs-carousel-slide`: Required for each slide element\n- `hs-carousel-prev`: Optional previous slide button\n- `hs-carousel-next`: Optional next slide button\n- `hs-carousel-pagination`: Optional pagination container\n\n**Initial State:**\n- Carousel body typically starts with `opacity-0` which is removed after loading\n- First slide is active by default (index 0)\n\n## Configuration Options\n\n### Data Options\n\nData options are specified in the `data-hs-carousel` attribute as a JSON object.\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `currentIndex` | number | `0` | Specifies the index of the current slide initially (from 0 to slides quantity). |\n| `loadingClasses` | string | `\"opacity-0\"` | Specifies which classes should be removed after the carousel is loaded. CSS classes should be separated with space. |\n| `dotsItemClasses` | string | - | Specifies which classes will be added to the point elements (which are generated automatically). CSS classes should be separated with space. |\n| `isAutoHeight` | boolean | `false` | Sets the height of the carousel to the height of the current slide. |\n| `isAutoPlay` | boolean | `false` | Enables autoplay. Slides advance automatically at the interval specified by `speed`. |\n| `isInfiniteLoop` | boolean | `true` | Enables infinite loop. When reaching the last slide, it wraps to the first slide. |\n| `isCentered` | boolean | `false` | Enables centered mode. This mode adds space on the sides to center the slides. |\n| `isSnap` | boolean | `false` | Enables a mode in which you can scroll the contents of the slider using the scroll along the x-axis, while the active slider is centered relative to the slider. |\n| `isScrollBlocked` | boolean | `false` | Prevents the user from scrolling the slider. Useful when you need to prevent scrolling while the carousel is active. |\n| `isDraggable` | boolean | `false` | Adds the ability to change slides using dragging. Requires adding `hs-carousel:dragging:transition-none` class to the `hs-carousel-body`. Not working with `isSnap: true` option. |\n| `isRTL` | boolean | `false` | Turns on RTL (right-to-left) mode. |\n| `hasSnapSpacers` | boolean | `true` | Adds additional elements to create a constant centering effect. |\n| `slidesQty` | object \\| number | `1` | Allows to set the number of slides to display at a certain screen resolution if passed as an object (e.g., `{\"xs\": 1, \"md\": 2, \"lg\": 3}`). If passed as a number, the specified number of slides will be displayed for all screen resolutions. |\n| `slideBy` | object \\| number | `1` | Specifies how many slides to move when navigating through the carousel. Can be a number for all screen sizes or an object with breakpoint-specific values. |\n| `speed` | number | `4000` | Autoplay animation speed in milliseconds. Available if `isAutoplay: true`. |\n| `updateDelay` | number | `0` | Allows you to delay the update function when resizing a window. Suitable for a slider with images, for more accurate calculation of the size of the images. |\n| `mode` | `\"default\"` \\| `\"snap\"` \\| `\"bounded\"` | `\"default\"` | Defines the carousel's behavior mode. `default` for standard sliding, `snap` for scroll-based navigation with snap points, and `bounded` for a fixed-width container with responsive slides. |\n| `boundedOptions` | object | `null` | Configuration options for the bounded mode carousel. Includes `maxWidth` to set the maximum width of the carousel container, `slidesGap` to define spacing between slides, and `spacersWidth` to control the width of side spacers. When `spacersWidth` is set to `\"auto\"`, it automatically calculates equal spacing on both sides. |\n\n**Example:**\n```html\n
\n \n
\n```\n\n### Required CSS Classes\n\nThese classes define the structure and must be present for the carousel to function.\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-carousel` | Wrapper container | A wrapper for a collection of slides. Must contain the `overflow-hidden` class for correct functionality. |\n| `hs-carousel-body` | Slides container | Container for all slide elements. |\n| `hs-carousel-slide` | Each slide element | Identifies an individual slide. |\n\n### Optional CSS Classes\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-carousel-prev` | Previous button | Previous slide navigation button. |\n| `hs-carousel-next` | Next button | Next slide navigation button. |\n| `hs-carousel-pagination` | Pagination container | Pagination container. If it doesn't contain nested elements, dots are generated automatically. If it contains elements with `hs-carousel-pagination-item` class, they will act as dots. |\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-carousel-active:*` | A modifier that allows you to set Tailwind classes when the active slide was shown. |\n| `hs-carousel-disabled:*` | A modifier that allows you to set Tailwind classes for arrow buttons when they are `disabled`. |\n| `hs-carousel:dragging:*` | A modifier that allows you to set Tailwind classes for `hs-carousel-body` when dragging. |\n\n## JavaScript API\n\nThe `HSCarousel` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a carousel instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `goToPrev()` | None | `void` | Navigates to the previous slide. |\n| `goToNext()` | None | `void` | Navigates to the next slide. |\n| `goTo(index)` | `index`: `number` | `void` | Navigates to the slide at the specified index. Index starts from 0. |\n| `recalculateWidth()` | None | `void` | Recalculates the width of the carousel. Useful after dynamically adding or removing slides, or when window is resized. |\n| `destroy()` | None | `void` | Destroys the carousel instance, removes all generated markup, classes, and event listeners. Use when removing carousel from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSCarousel` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSCarousel.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HSCarousel \\| { id: string \\| number, element: HSCarousel } \\| null` | Returns the carousel instance associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSCarousel` instance. If `isInstance` is `false` or omitted, returns the `HSCarousel` instance directly. Returns `null` if carousel instance is not found. |\n\n### Usage Examples\n\n**Example 1: Using instance methods (public API)**\n```javascript\n// Create a new carousel instance\nconst carousel = new HSCarousel(document.querySelector('#hs-carousel'));\nconst goToSecondBtn = document.querySelector('#hs-go-to-second-btn');\n\n// Navigate to slide by index\ngoToSecondBtn.addEventListener('click', () => {\n carousel.goTo(1); // Go to second slide (index 1)\n});\n```\n\n**Example 2: Getting instance and using methods (recommended pattern)**\n```javascript\n// Get the carousel instance\nconst instance = HSCarousel.getInstance('#hs-carousel', true);\n\nif (instance) {\n const { element } = instance; // element is the HSCarousel instance\n const goToSecondBtn = document.querySelector('#hs-go-to-second-btn');\n const prevBtn = document.querySelector('#hs-prev-btn');\n const nextBtn = document.querySelector('#hs-next-btn');\n\n // Navigate to specific slide\n goToSecondBtn.addEventListener('click', () => {\n element.goTo(1);\n });\n\n // Navigate to previous slide\n prevBtn.addEventListener('click', () => {\n element.goToPrev();\n });\n\n // Navigate to next slide\n nextBtn.addEventListener('click', () => {\n element.goToNext();\n });\n\n // Recalculate width after dynamic changes\n function updateCarousel() {\n element.recalculateWidth();\n }\n\n // Clean up when removing from DOM\n function removeCarousel() {\n element.destroy();\n }\n}\n```\n\n**Example 3: Destroying carousel instance**\n```javascript\nconst instance = HSCarousel.getInstance('#hs-carousel', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-carousel').remove();\n });\n}\n```\n\n## Events\n\nCarousel instances emit events that can be listened to for slide lifecycle hooks.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:update` | After the active slide changes | `number` (zero-based index of the current slide) | Fires after navigating to the next or previous slide, or after `goTo()` is called. |\n\n### Event Usage Example\n\n```javascript\n// Get carousel instance\nconst instance = HSCarousel.getInstance('#hs-carousel', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen for slide changes\n element.on('update', (currentIndex) => {\n console.log('Active slide:', currentIndex);\n // Update external indicators, counters, etc.\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Responsive Carousel\n\nDisplay different number of slides at different breakpoints.\n\n```html\n
\n \n
\n```\n\n### Pattern 2: Autoplay Carousel\n\nAutomatically advance slides at regular intervals.\n\n```html\n
\n \n
\n```\n\n### Pattern 3: Programmatic Control\n\nControl carousel from external buttons.\n\n```html\n\n\n\n\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/collapse/README.md":"# Collapse\n\nToggle the visibility of content.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/collapse) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/collapse.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Collapse component allows you to show and hide content with smooth transitions. It's a simple, lightweight solution for creating expandable/collapsible sections without the complexity of accordion groups.\n\n**Key Features:**\n- Simple show/hide functionality\n- Smooth CSS transitions\n- Programmatic control via JavaScript API\n- Event system for lifecycle hooks\n- Accessibility attributes (ARIA) built-in\n\n## Installation\n\nTo get started, install Collapse plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/collapse\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/collapse */\n@source \"../node_modules/@preline/collapse/*.js\";\n@import \"./node_modules/@preline/collapse/variants.css\";\n@import \"./node_modules/@preline/collapse/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/collapse` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/collapse\";\n```\n\n`@preline/collapse/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSCollapse from \"@preline/collapse/non-auto\";\n\nHSCollapse.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#collapse\");\nif (el) new HSCollapse(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a collapse component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The content is hidden by default and expands when the button is clicked.\n\n```html\n\n\n```\n\n**Structure Requirements:**\n- `hs-collapse-toggle`: Required button element that triggers the collapse\n- `hs-collapse`: Required container for collapsible content\n- `data-hs-collapse`: Required attribute on the toggle button, must be a valid CSS selector pointing to the collapse content\n- Unique `id` attributes for the toggle button and collapse content\n- Proper ARIA attributes (`aria-expanded`, `aria-controls`, `aria-labelledby`, `role=\"region\"`)\n\n**Initial State:**\n- Set `aria-expanded=\"false\"` on the toggle button initially\n- Add `hidden` class to the collapse content initially\n- Content visibility is controlled by the plugin\n\n## Configuration Options\n\n### Data Attributes\n\nData attributes are added directly to HTML elements to configure collapse behavior.\n\n| Attribute | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-collapse` | `hs-collapse-toggle` (button) | string (CSS selector) | `null` | Collapse container selector. Must be a valid CSS selector pointing to the `hs-collapse` element. |\n\n**Example:**\n```html\n\n
Content
\n```\n\n### Required CSS Classes\n\nThese classes define the structure and must be present for the collapse to function.\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-collapse` | Content container | Identifies the collapsible content area |\n| `hs-collapse-toggle` | Button element | The clickable element that expands/collapses content |\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-collapse-open:*` | A modifier that allows you to set Tailwind classes when the collapse is open. |\n\n## JavaScript API\n\nThe `HSCollapse` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a collapse instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `show()` | None | `boolean` | Opens the collapsed content. Returns `false` if content is already open, `true` otherwise. |\n| `hide()` | None | `boolean` | Collapses the currently open content. Returns `false` if content is already closed, `true` otherwise. |\n| `destroy()` | None | `void` | Destroys the collapse instance, removes all generated markup, classes, and event listeners. Use when removing collapse from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSCollapse` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSCollapse.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HTMLElement \\| { id: string \\| number, element: HSCollapse } \\| null` | Returns the collapse instance or element associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSCollapse` instance. If `isInstance` is `false` or omitted, returns the DOM element (`HTMLElement`). Returns `null` if collapse instance is not found. |\n| `HSCollapse.show(target)` | `target`: `HSCollapse \\| HTMLElement \\| string` (CSS selector) | `void` | Shows the collapse content identified by target. Accepts a collapse instance, DOM element, or CSS selector string. Static alternative to instance `show()` method. |\n| `HSCollapse.hide(target)` | `target`: `HSCollapse \\| HTMLElement \\| string` (CSS selector) | `void` | Hides the collapse content identified by target. Accepts a collapse instance, DOM element, or CSS selector string. Static alternative to instance `hide()` method. |\n\n### Usage Examples\n\n**Example 1: Using instance methods (public API)**\n```javascript\n// Create a new collapse instance\nconst collapse = new HSCollapse(document.querySelector('#hs-collapse'));\nconst showBtn = document.querySelector('#hs-show-btn');\n\n// Show collapse programmatically\nshowBtn.addEventListener('click', () => {\n collapse.show();\n});\n```\n\n**Example 2: Using static methods**\n```javascript\nconst showBtn = document.querySelector('#hs-show-btn');\n\n// Show collapse using static method (no instance needed)\nshowBtn.addEventListener('click', () => {\n HSCollapse.show('#hs-collapse');\n});\n```\n\n**Example 3: Getting instance and using methods (recommended pattern)**\n```javascript\n// Get the collapse instance\nconst instance = HSCollapse.getInstance('#hs-collapse', true);\n\nif (instance) {\n const { element } = instance; // element is the HSCollapse instance\n const showBtn = document.querySelector('#hs-show-btn');\n\n // Use instance methods\n showBtn.addEventListener('click', () => {\n element.show();\n });\n\n // Clean up when removing from DOM\n function removeCollapse() {\n element.destroy();\n }\n}\n```\n\n**Example 4: Destroying collapse instance**\n```javascript\nconst instance = HSCollapse.getInstance('#hs-collapse', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-collapse').remove();\n });\n}\n```\n\n## Events\n\nCollapse instances emit events that can be listened to for lifecycle hooks and custom behavior.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:open` | After collapse content is opened | `HTMLElement` (collapse element) | Fires after the collapse content has been displayed. Use for post-open actions like loading content. |\n| `on:hide` | After collapse content is closed | `HTMLElement` (collapse element) | Fires after the collapse content has been hidden. Use for cleanup or state updates. |\n\n### Event Usage Example\n\n```javascript\n// Get collapse instance\nconst instance = HSCollapse.getInstance('#hs-collapse', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen to open event\n element.on('open', (collapseElement) => {\n console.log('Collapse opened:', collapseElement);\n // Perform actions after collapse opens\n // e.g., load content, update UI, track analytics\n });\n\n // Listen to hide event\n element.on('hide', (collapseElement) => {\n console.log('Collapse closed:', collapseElement);\n // Perform cleanup or state updates\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Programmatic Control\n\nControl collapse from external buttons.\n\n```html\n\n
Content
\n\n\n\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/combobox/README.md":"# ComboBox\n\nDynamic suggestions as users type in an input field.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/combobox) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/combobox.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe ComboBox component provides an autocomplete input field with dynamic suggestions. It supports both client-side filtering and API-based data fetching, customizable templates, and flexible data rendering options.\n\n**Key Features:**\n- Dynamic autocomplete suggestions\n- Client-side and API-based data fetching\n- Customizable item templates\n- Keyboard navigation support\n- Programmatic control via JavaScript API\n- Event system for selection tracking\n- Accessibility attributes (ARIA) built-in\n\n## Installation\n\nTo get started, install ComboBox plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/combobox\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/combobox */\n@source \"../node_modules/@preline/combobox/*.js\";\n@import \"./node_modules/@preline/combobox/variants.css\";\n@import \"./node_modules/@preline/combobox/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/combobox` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/combobox\";\n```\n\n`@preline/combobox/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSCombobox from \"@preline/combobox/non-auto\";\n\nHSCombobox.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#combobox\");\nif (el) new HSCombobox(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a combobox component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The combobox shows suggestions as the user types.\n\n```html\n
\n
\n \n
\n \n
\n
\n 1\n
\n
\n 2\n
\n
\n
\n```\n\n**Structure Requirements:**\n- `data-hs-combo-box`: Required on the container element\n- `data-hs-combo-box-input`: Required on the input element\n- `data-hs-combo-box-output`: Required on the dropdown container\n- `data-hs-combo-box-output-item`: Required on each suggestion item\n- `data-hs-combo-box-search-text`: Required on the searchable text element within each item\n- Proper ARIA attributes (`role=\"combobox\"`, `aria-expanded`)\n\n**Initial State:**\n- Set `aria-expanded=\"false\"` on the input initially\n- Add `style=\"display: none;\"` to the output container initially\n- Output visibility is controlled by the plugin\n\n## Configuration Options\n\n### Data Options\n\nData options are specified in the `data-hs-combo-box` attribute and various data attributes.\n\n| Attribute | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-combo-box` | Container | - | - | Activate a ComboBox by specifying on an element. Should be added to the container. |\n| `:gap` | Inside `data-hs-combo-box` | number | `5` | Determines the indent from the input field to the dropdown list in pixels. |\n| `:viewport` | Inside `data-hs-combo-box` | string \\| HTMLElement | `null` | Determines which element will be the parent when calculating the position of the dropdown list. By default it is calculated relative to the document. |\n| `:minSearchLength` | Inside `data-hs-combo-box` | number | `0` | Specifies the minimum number of characters that must be entered before the search function becomes active. |\n| `:apiUrl` | Inside `data-hs-combo-box` | string \\| null | `null` | Specifies the API address for fetching suggestions. |\n| `:apiDataPart` | Inside `data-hs-combo-box` | string \\| null | `null` | Determines which part of the returned data will be taken as the main data array. If this parameter is empty, then the root is taken as a basis. |\n| `:apiQuery` | Inside `data-hs-combo-box` | string \\| null | `null` | Defines request parameters, such as limit. |\n| `:apiSearchQuery` | Inside `data-hs-combo-box` | string \\| null | `null` | Defines the name of the search parameter. |\n| `:apiHeaders` | Inside `data-hs-combo-box` | string \\| null | `null` | Defines request headers. |\n| `:apiSearchPath` | Inside `data-hs-combo-box` | string \\| null | `null` | A string that specifies the endpoint path for the API request, excluding the base URL. Note: `apiSearchPath` and `apiSearchDefaultPath` are mutually exclusive with `apiSearchQuery`. |\n| `:apiSearchDefaultPath` | Inside `data-hs-combo-box` | string \\| null | `null` | A string that defines the default API endpoint path to be used when the input field is empty. Note: `apiSearchPath` and `apiSearchDefaultPath` are mutually exclusive with `apiSearchQuery`. |\n| `:outputItemTemplate` | Inside `data-hs-combo-box` | string \\| null | Default template | Defines a template for a single item in a dropdown list. |\n| `:outputEmptyTemplate` | Inside `data-hs-combo-box` | string \\| null | Default template | Defines a template for an empty placeholder. |\n| `:outputLoaderTemplate` | Inside `data-hs-combo-box` | string \\| null | Default template | Defines a template for the loader when loading data. |\n| `:preventAutoPosition` | Inside `data-hs-combo-box` | boolean | `false` | If `true`, it disables dropdown auto-positioning. |\n| `:preventClientFiltering` | Inside `data-hs-combo-box` | boolean | `true` (if `:apiSearchQuery` is not empty) | If `true`, it disables client-side filtering. |\n| `:keepOriginalOrder` | Inside `data-hs-combo-box` | boolean | `false` | If `true`, it keeps the original order of items. |\n| `:preserveSelectionOnEmpty` | Inside `data-hs-combo-box` | boolean | `true` | If `true`, it preserves the selected value when the input is empty. |\n| `data-hs-combo-box-input` | Input element | - | - | Determines which element (input) inside the initialized container will be responsible for entering data. |\n| `data-hs-combo-box-output` | Output container | - | - | Determines which element inside the initialized container will be responsible for data output. |\n| `data-hs-combo-box-toggle` | Toggle element | - | - | Defines an element inside the initialized container that will be responsible for hiding/showing the dropdown list. |\n| `data-hs-combo-box-close` | Close element | - | - | Defines an element inside the initialized container that will be responsible for hiding the dropdown list. |\n| `data-hs-combo-box-open` | Open element | - | - | Defines an element inside the initialized container that will be responsible for showing the dropdown list. |\n| `data-hs-combo-box-output-item` | Item element | - | - | Defines an element inside the initialized container that will be responsible for displaying each individual data element. |\n| `data-hs-combo-box-search-text` | Search text element | - | - | Defines the element within which text will be searched. |\n| `data-hs-combo-box-value` | Value element | - | - | Defines an element whose text will be set as a value when selected. |\n| `data-hs-combo-box-output-item-field` | Item field | string \\| string[] | - | Defines a data field that will be taken to fill the element with text. |\n| `data-hs-combo-box-output-item-attr` | Item attribute | - | - | Defines the attributes that will be filled with the corresponding data. For example, the src attribute of an image. |\n| `:valueFrom` | Inside `data-hs-combo-box-output-item-attr` | string | - | Defines the name of the field from which data will be taken. |\n| `:attr` | Inside `data-hs-combo-box-output-item-attr` | string | - | Defines the name of the attribute where the data will be supplied. |\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-combo-box-active:*` | A modifier that allows you to set Tailwind classes when ComboBox has been opened. |\n| `hs-combo-box-has-value:*` | A modifier that allows you to set Tailwind classes when ComboBox's input has value. |\n| `hs-combo-box-selected:*` | A modifier that allows you to set Tailwind classes when `data-hs-combo-box-output-item` has been selected. |\n| `hs-combo-box-tab-active:*` | A modifier that allows you to set Tailwind classes to the active group item (tab) when `groupingType` is `tabs`. |\n\n## JavaScript API\n\nThe `HSComboBox` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a combobox instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `getCurrentData()` | None | `object \\| object[]` | Returns the data of the selected element as an object. This data must first be assigned as a value to the data parameter `data-hs-combo-box-item-stored-data` when standard rendering. When rendering via the API, the data is automatically substituted into the data attribute. |\n| `setCurrent()` | None | `void` | Sets the current selection based on the input value. |\n| `open(val)` | `val`: `string` (optional) | `boolean` | Opens the autosuggestion list. Optionally accepts a value to set in the input. Returns `true` if opened successfully, `false` otherwise. |\n| `close(val, data)` | `val`: `string \\| null` (optional)
`data`: `object \\| null` (optional) | `boolean` | Closes the autosuggestion list. Optionally accepts a value and data to set. Returns `true` if closed successfully, `false` otherwise. |\n| `recalculateDirection()` | None | `void` | Forces recalculation of autosuggestion list positions. Useful after window resize or layout changes. |\n| `destroy()` | None | `void` | Destroys the combobox instance, removes all generated markup, classes, and event listeners. Use when removing combobox from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSComboBox` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSComboBox.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HSComboBox \\| { id: string \\| number, element: HSComboBox } \\| null` | Returns the combobox instance associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSComboBox` instance. If `isInstance` is `false` or omitted, returns the `HSComboBox` instance directly. Returns `null` if combobox instance is not found. |\n| `HSComboBox.autoInit()` | None | `void` | Reinitializes all ComboBoxes on the page. Useful after dynamically adding comboboxes to DOM. |\n| `HSComboBox.close(target)` | `target`: `HTMLElement \\| string` (CSS selector) | `void` | Closes the combobox identified by target. Accepts a DOM element or CSS selector string. |\n| `HSComboBox.closeCurrentlyOpened()` | None | `void` | Closes an already open ComboBox. Useful for closing any open combobox before opening a new one. |\n\n### Usage Examples\n\n**Example 1: Using instance methods (public API)**\n```javascript\n// Create a new combobox instance\nconst comboBox = new HSComboBox(document.querySelector('#hs-combo-box'));\nconst openBtn = document.querySelector('#hs-open-btn');\n\n// Open combobox programmatically\nopenBtn.addEventListener('click', () => {\n comboBox.open();\n});\n```\n\n**Example 2: Getting instance and using methods (recommended pattern)**\n```javascript\n// Get the combobox instance\nconst instance = HSComboBox.getInstance('#hs-combo-box', true);\n\nif (instance) {\n const { element } = instance; // element is the HSComboBox instance\n const openBtn = document.querySelector('#hs-open-btn');\n\n // Use instance methods\n openBtn.addEventListener('click', () => {\n element.open();\n });\n\n // Get selected data\n const selectedData = element.getCurrentData();\n console.log('Selected:', selectedData);\n\n // Clean up when removing from DOM\n function removeComboBox() {\n element.destroy();\n }\n}\n```\n\n**Example 3: Destroying combobox instance**\n```javascript\nconst instance = HSComboBox.getInstance('#hs-combo-box', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-combo-box').remove();\n });\n}\n```\n\n## Events\n\nCombobox instances emit events that can be listened to for selection lifecycle hooks.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:select` | When an item is selected from the dropdown | `object` (the selected item data object) | Fires after the user clicks an option in the combobox dropdown. |\n\n### Event Usage Example\n\n```javascript\n// Get combobox instance\nconst instance = HSCombobox.getInstance('#hs-combobox', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen for item selection\n element.on('select', (data) => {\n console.log('Selected item:', data);\n // Use selected data to update other parts of the UI\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: API-based ComboBox\n\nFetch suggestions from an API endpoint.\n\n```html\n
\n \n
\n
\n```\n\n### Pattern 2: Programmatic Control\n\nControl combobox from external buttons.\n\n```html\n
\n \n
\n
\n\n\n\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/copy-markup/README.md":"# Copy Markup\n\nCopy input, select or other markups.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/copy-markup) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/copy-markup.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Copy Markup component allows you to dynamically duplicate HTML elements (inputs, selects, or other markup) with a single click. It's useful for creating dynamic forms where users can add multiple instances of the same field.\n\n**Key Features:**\n- One-click element duplication\n- Configurable copy limits\n- Automatic element management\n- Programmatic control via JavaScript API\n- Event system for copy/delete tracking\n- Support for any HTML markup\n\n## Installation\n\nTo get started, install Copy Markup plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/copy-markup\n```\n\n### CSS\n\n[`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS file into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/copy-markup */\n@import \"./node_modules/@preline/copy-markup/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/copy-markup` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/copy-markup\";\n```\n\n`@preline/copy-markup/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSCopyMarkup from \"@preline/copy-markup/non-auto\";\n\nHSCopyMarkup.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#copy-markup\");\nif (el) new HSCopyMarkup(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a copy markup component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. Clicking the button will duplicate the target element.\n\n```html\n
\n \n
\n\n\n```\n\n**Structure Requirements:**\n- `data-hs-copy-markup`: Required on the trigger button, contains configuration options as JSON\n- `targetSelector`: Required, must be a valid CSS selector pointing to the element to copy\n- `wrapperSelector`: Required, must be a valid CSS selector pointing to the container where copies will be added\n- Target element must exist in the DOM\n\n**Initial State:**\n- One instance of the target element exists\n- Copy button is enabled (unless limit is reached)\n\n## Configuration Options\n\n### Data Options\n\nData options are specified in the `data-hs-copy-markup` attribute as a JSON object.\n\n| Option | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-copy-markup` | Trigger button | - | - | Activate a Copy Markup by specifying on an element. Should be added to the button (trigger). |\n| `:targetSelector` | Inside `data-hs-copy-markup` | string (CSS selector) | - | Specifies the target element to copy. The value must be a valid CSS selector. Required. |\n| `:wrapperSelector` | Inside `data-hs-copy-markup` | string (CSS selector) | - | Specifies which element should be used for copying. The value must be a valid CSS selector. Required. |\n| `:limit` | Inside `data-hs-copy-markup` | number | `null` | Specifies how many items you can copy until the button is disabled. `null` means no limit. |\n\n**Example:**\n```html\n\n```\n\n## JavaScript API\n\nThe `HSCopyMarkup` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a copy markup instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `delete(target)` | `target`: `HTMLElement` | `void` | Remove the element associated to the target. The target should be a Node (HTMLElement). Use this to programmatically remove copied elements. |\n| `destroy()` | None | `void` | Destroys the copy markup instance, removes all generated markup, classes, and event listeners. Use when removing copy markup from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSCopyMarkup` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSCopyMarkup.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HSCopyMarkup \\| { id: string \\| number, element: HSCopyMarkup } \\| null` | Returns the copy markup instance associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSCopyMarkup` instance. If `isInstance` is `false` or omitted, returns the `HSCopyMarkup` instance directly. Returns `null` if copy markup instance is not found. |\n\n### Usage Examples\n\n**Example 1: Deleting copied elements**\n```javascript\n// Get the copy markup instance\nconst instance = HSCopyMarkup.getInstance('#hs-copy-content', true);\n\nif (instance) {\n const { element } = instance;\n const deleteBtn = document.querySelector('#hs-delete-btn');\n\n deleteBtn.addEventListener('click', () => {\n // Delete a specific copied element\n const copiedElement = document.querySelector('#hs-copy-markup-item-first');\n\n if (copiedElement) {\n element.delete(copiedElement);\n }\n });\n}\n```\n\n**Example 2: Using instance methods (recommended pattern)**\n```javascript\n// Get the copy markup instance\nconst instance = HSCopyMarkup.getInstance('#hs-copy-content', true);\n\nif (instance) {\n const { element } = instance;\n\n // Access instance properties\n console.log('Items:', element.items);\n console.log('Limit:', element.limit);\n\n // Delete a copied element programmatically\n function removeCopiedItem(itemElement) {\n element.delete(itemElement);\n }\n\n // Clean up when removing from DOM\n function removeCopyMarkup() {\n element.destroy();\n }\n}\n```\n\n**Example 3: Destroying copy markup instance**\n```javascript\nconst instance = HSCopyMarkup.getInstance('#hs-copy-content', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-copy-content').remove();\n });\n}\n```\n\n## Events\n\nCopy markup instances emit events that can be listened to for copy/delete tracking and custom behavior.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:copy` | When target element was copied | `HTMLElement` (copied element) | Fires when a new copy of the target element is created. Returns the newly created element. |\n| `on:delete` | When target element was deleted | `HTMLElement` (deleted element) | Fires when a copied element is deleted. Returns the deleted element. |\n\n### Event Usage Example\n\n```javascript\n// Get copy markup instance\nconst instance = HSCopyMarkup.getInstance('#hs-copy-content', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen to copy event\n element.on('copy', (copiedElement) => {\n console.log('Element copied:', copiedElement);\n // Perform actions after element is copied\n // e.g., initialize other plugins on the new element, update counters\n });\n\n // Listen to delete event\n element.on('delete', (deletedElement) => {\n console.log('Element deleted:', deletedElement);\n // Perform cleanup or state updates\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Limited Copies\n\nLimit the number of copies that can be created.\n\n```html\n\n```\n\n### Pattern 2: Dynamic Form Fields\n\nCreate dynamic form fields with copy functionality.\n\n```html\n
\n \n
\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/datatable/README.md":"# Datatables\n\nDatatables solutions for massive datasets.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/datatable) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/datatables.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [CSS](#css)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Datatables component provides a powerful data table interface with sorting, searching, pagination, and row selection capabilities. It integrates with DataTables.net for advanced table functionality.\n\n**Key Features:**\n- Column sorting\n- Search functionality\n- Pagination\n- Row selection (single and multiple)\n- Customizable paging controls\n- Integration with DataTables.net\n- Programmatic control via JavaScript API\n- Event system for table interactions\n\n## Installation\n\nTo get started, install DataTable plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i jquery datatables.net-dt @preline/datatable\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/datatable */\n@source \"../node_modules/@preline/datatable/*.js\";\n@import \"./node_modules/@preline/datatable/variants.css\";\n@import \"./node_modules/@preline/datatable/theme.css\";\n\n.dt-layout-row:has(.dt-search),\n.dt-layout-row:has(.dt-length),\n.dt-layout-row:has(.dt-paging) {\n display: none !important;\n}\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. `jQuery` and `DataTable` are referenced as globals, so expose them on `window` before importing the plugin.\n\n`@preline/datatable` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport jQuery from \"jquery\";\nwindow.jQuery = jQuery;\nwindow.$ = jQuery;\nimport DataTable from \"datatables.net\";\nwindow.DataTable = DataTable;\n\nimport \"@preline/datatable\";\n```\n\n`@preline/datatable/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport jQuery from \"jquery\";\nwindow.jQuery = jQuery;\nwindow.$ = jQuery;\nimport DataTable from \"datatables.net\";\nwindow.DataTable = DataTable;\n\nimport HSDataTable from \"@preline/datatable/non-auto\";\n\nHSDataTable.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#datatable\");\nif (el) new HSDataTable(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a datatable component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The table supports sorting, searching, and pagination.\n\n```html\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Name\n \n \n \n Age\n \n \n \n Action\n
John Brown45\n \n
\n\n
\n \n
\n \n
\n
\n```\n\n**Structure Requirements:**\n- `data-hs-datatable`: Required on the container element\n- Standard HTML `` structure with `` and ``\n- Optional paging controls with `data-hs-datatable-paging`\n- Optional search input with `data-hs-datatable-search`\n- Optional row selection checkboxes\n\n**Initial State:**\n- Table displays all data\n- Sorting is enabled on columns (unless excluded)\n- Pagination controls are hidden if not needed\n\n## CSS\n\nPlease add the following CSS to the head. This is necessary because Datatables.net does not allow to add custom markup with options disabled, such as `paging: false` or `searching: false`.\n\n```html\n\n```\n\n## Configuration Options\n\n### Data Options\n\n> **Note:** Please note that this component requires the use of the [Datatables.net](https://datatables.net/) plugin. Most options available in the plugin are available in our wrapper.\n\nData options are specified in the `data-hs-datatable` attribute as a JSON object.\n\n| Option | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-datatable` | Container | - | - | Activate a Datatable by specifying on an element. Should be added to the container. |\n| `:pageBtnClasses` | Inside `data-hs-datatable` | string | `\"-\"` | Sets the specified classes to each paging element inside the `data-hs-datatable-paging-pages`. |\n| `:rowSelectingOptions.selectAllSelector` | Inside `data-hs-datatable` | string (CSS selector) | `\"[data-hs-datatable-row-selecting-all]\"` | A valid CSS selector (the element must be a checkbox or radio button), when the element is changed, all elements specified by `rowSelectingOptions.individualSelector` (or, if not specified, then `data-hs-datatable-row-selecting-individual`) on the current page will be changed. |\n| `:rowSelectingOptions.individualSelector` | Inside `data-hs-datatable` | string (CSS selector) | `\"[data-hs-datatable-row-selecting-individual]\"` | A valid CSS selector (the element must be a checkbox or radio button), affects the change of the element specified in `rowSelectingOptions.selectAllSelector`, if not all elements are selected on the current page, then it switches to `unchecked` state, if vice versa, then in `checked`. |\n\n**Example:**\n```html\n
\n \n
\n```\n\n### Class Options\n\nCSS class modifiers use `--` prefix to control datatable behavior.\n\n| Class Modifier | Target Element | Purpose |\n| --- | --- | --- |\n| `--exclude-from-ordering` | Table header (`\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/datepicker/README.md":"# Advanced Datepicker\n\nCreate visually appealing and interactive datepickers in combination with the Datepicker JavaScript plugin.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/datepicker) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/advanced-datepicker.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Advanced Datepicker component provides a comprehensive date selection interface with support for custom templates, multiple date formats, time selection, and integration with Vanilla Calendar Pro. It offers flexible configuration options for styling and behavior.\n\n**Key Features:**\n- Date and time selection\n- Custom select inputs for months, years, and time\n- Multiple date formats and locales\n- Custom templates for arrows and time display\n- Integration with Vanilla Calendar Pro\n- Programmatic control via JavaScript API\n- Utility classes support\n\n## Installation\n\nTo get started, install Datepicker plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/select @preline/datepicker\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\nUse `styles.css` with `theme.css` for the default themed appearance:\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/select */\n@source \"../node_modules/@preline/select/*.js\";\n@import \"./node_modules/@preline/select/variants.css\";\n\n/* @preline/datepicker */\n@source \"../node_modules/@preline/datepicker/*.js\";\n@import \"./node_modules/@preline/datepicker/variants.css\";\n@import \"./node_modules/@preline/datepicker/styles.css\";\n@import \"./node_modules/@preline/datepicker/theme.css\";\n```\n\nUse `styles-utility.css` instead when you plan to style the datepicker entirely with Tailwind utility classes. In this case `theme.css` is not needed:\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/select */\n@source \"../node_modules/@preline/select/*.js\";\n@import \"./node_modules/@preline/select/variants.css\";\n@import \"./node_modules/@preline/select/theme.css\";\n\n/* @preline/datepicker */\n@source \"../node_modules/@preline/datepicker/*.js\";\n@import \"./node_modules/@preline/datepicker/variants.css\";\n@import \"./node_modules/@preline/datepicker/styles-utility.css\";\n```\n\n`@preline/select` is required for styling the embedded select dropdowns used in `custom-select` mode.\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. `vanilla-calendar-pro` and the Advanced Select plugin are bundled inside `@preline/datepicker`, so no separate imports are needed.\n\n`@preline/datepicker` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/datepicker\";\n```\n\n`@preline/datepicker/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSDatepicker from \"@preline/datepicker/non-auto\";\n\nHSDatepicker.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#datepicker\");\nif (el) new HSDatepicker(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for an advanced datepicker component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The datepicker appears when the input is focused.\n\n```html\n\n```\n\n**Structure Requirements:**\n- `hs-datepicker`: Required class on the input element\n- `data-hs-datepicker`: Required attribute containing configuration options as JSON\n- `readonly` attribute on the input to prevent manual editing\n- `type=\"text\"` on the input element\n\n**Initial State:**\n- Input field is empty by default\n- Datepicker appears when input is focused or clicked\n\n## Configuration Options\n\n### Data Options\n\n> **Note:** This component requires the use of the [Vanilla Calendar Pro](https://vanilla-calendar.pro/) plugin. Most options available in the plugin are available in our wrapper. Check [Vanilla Calendar Pro Options](https://vanilla-calendar.pro/docs/reference/settings/) for more details.\n\nData options are specified in the `data-hs-datepicker` attribute as a JSON object.\n\n| Option | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-datepicker` | Input element | - | - | Activate a Datepicker by specifying on an element. Should be added to the element itself. |\n| `:mode` | Inside `data-hs-datepicker` | `\"default\"` \\| `\"custom-select\"` | `\"default\"` | This option allows you to specify the operational mode of the datepicker. `default` uses standard layout provided by Vanilla Calendar Pro. `custom-select` activates custom select inputs for months, years and time elements. |\n| `:applyUtilityClasses` | Inside `data-hs-datepicker` | boolean | `false` | Specifies whether to apply utility classes to the datepicker. If set to `true`, the datepicker receives utility classes based on the `primary` theme. |\n| `:inputModeOptions.dateSeparator` | Inside `data-hs-datepicker` | string | `\".\"` | Specifies the character used to separate the year, month, and day in the date format displayed in the input field. E.g., `/` produces a date format like `2024/01/22`. |\n| `:inputModeOptions.itemsSeparator` | Inside `data-hs-datepicker` | string | `\", \"` | Specifies the character or string used to separate multiple date entries in the input field when multiple dates are selected. E.g., `\\|` produces a format like `2024-01-22 \\| 2024-01-23`. |\n| `:styles.customSelect.shared` | Inside `data-hs-datepicker` | object | - | Defines shared styling configurations for Advanced Custom Select components. These styles are consistently applied to all instances of the Advanced Custom Select within the wrapper. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:styles.customSelect.months` | Inside `data-hs-datepicker` | object | - | Defines additional styling configurations specifically for the \"months\" instance of the Advanced Custom Select. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:styles.customSelect.years` | Inside `data-hs-datepicker` | object | - | Defines additional styling configurations specifically for the \"years\" instance of the Advanced Custom Select. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:styles.customSelect.hours` | Inside `data-hs-datepicker` | object | - | Defines additional styling configurations specifically for the \"hours\" instance of the Advanced Custom Select. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:styles.customSelect.minutes` | Inside `data-hs-datepicker` | object | - | Defines additional styling configurations specifically for the \"minutes\" instance of the Advanced Custom Select. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:styles.customSelect.meridiem` | Inside `data-hs-datepicker` | object | - | Defines additional styling configurations specifically for the \"meridiem\" instance of the Advanced Custom Select. See [Advanced Select Options](advanced-select.md#js-data-options) for available options. |\n| `:templates.time` | Inside `data-hs-datepicker` | string | - | Allows to define a custom HTML template for rendering the time selection interface within the datepicker. |\n| `:templates.arrowPrev` | Inside `data-hs-datepicker` | string | - | Allows to define a custom HTML template for the \"previous\" navigation arrow in the datepicker. |\n| `:templates.arrowNext` | Inside `data-hs-datepicker` | string | - | Allows to define a custom HTML template for the \"next\" navigation arrow in the datepicker. |\n| `:dateFormat` | Inside `data-hs-datepicker` | string | - | Allows to define a custom date format. |\n| `:dateLocale` | Inside `data-hs-datepicker` | string | - | Allows to define the locale for the datepicker. |\n| `:replaceTodayWithText` | Inside `data-hs-datepicker` | boolean | - | Replace the current day name with the text \"Today\". |\n\n**Example:**\n```html\n\n```\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-vc-date-today:*` | A modifier that applies Tailwind classes to the current date (marked as \"today\") using the attribute `data-vc-date-today`. |\n| `hs-vc-date-selected:*` | A modifier that applies Tailwind classes to the selected dates using the attribute `data-vc-date-selected`. |\n| `hs-vc-date-weekend:*` | A modifier that applies Tailwind classes to weekend dates using the attribute `data-vc-date-weekend`. |\n| `hs-vc-week-day-off:*` | A modifier that applies Tailwind classes to weekdays marked as \"day off\" using the attribute `data-vc-week-day-off`. |\n| `hs-vc-date-month-prev:*` | A modifier that applies Tailwind classes to dates belonging to the previous month using the class `data-vc-date-month=\"prev\"`. |\n| `hs-vc-date-month-next:*` | A modifier that applies Tailwind classes to dates belonging to the next month using the attribute `data-vc-date-month=\"next\"`. |\n| `hs-vc-calendar-selected-middle:*` | A modifier that applies Tailwind classes to dates that are in the middle of a selected range using the attribute `data-vc-date-selected=\"middle\"`. |\n| `hs-vc-calendar-selected-first:*` | A modifier that applies Tailwind classes to the first date in a selected range using the attribute `data-vc-date-selected=\"first\"`. |\n| `hs-vc-calendar-selected-last:*` | A modifier that applies Tailwind classes to the last date in a selected range using the attribute `data-vc-date-selected=\"last\"`. |\n| `hs-vc-months-month-selected:*` | A modifier that applies Tailwind classes to the currently selected month using the attribute `data-vc-months-month-selected`. |\n| `hs-vc-years-year-selected:*` | A modifier that applies Tailwind classes to the currently selected year using the attribute `data-vc-years-year-selected`. |\n\n## JavaScript API\n\n> **Note:** This component requires the use of the [Vanilla Calendar Pro](https://vanilla-calendar.pro/) plugin. Most methods available in the plugin are available through our wrapper. Check [Vanilla Calendar Pro Methods](https://vanilla-calendar.pro/docs/reference/methods/) for more details.\n\nThe `HSDatepicker` object is available in the global `window` object after the plugin is loaded. Most methods from Vanilla Calendar Pro are available through the wrapper.\n\n### Instance Methods\n\nThese methods are called on a datepicker instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `getCurrentState()` | None | `{ selectedDates: DatesArr, selectedTime: string }` | Returns the current state of the datepicker including selected dates and time. |\n| `formatDate(date, format)` | `date`: `string \\| number \\| Date`
`format`: `string` (optional) | `string` | Formats a date according to the specified format or the datepicker's default format. |\n| `destroy()` | None | `void` | Destroys the datepicker instance, removes all generated markup, classes, and event listeners. Use when removing datepicker from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSDatepicker` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSDatepicker.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HTMLElement \\| { id: string \\| number, element: HSDatepicker } \\| null` | Returns the datepicker instance or element associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSDatepicker` instance. If `isInstance` is `false` or omitted, returns the DOM element (`HTMLElement`). Returns `null` if datepicker instance is not found. |\n\n### Usage Examples\n\n**Example 1: Getting current state**\n```javascript\n// Get the datepicker instance\nconst instance = HSDatepicker.getInstance('.hs-datepicker', true);\n\nif (instance) {\n const { element } = instance;\n // Get current state\n const state = element.getCurrentState();\n\n console.log('Selected dates:', state.selectedDates);\n console.log('Selected time:', state.selectedTime);\n}\n```\n\n**Example 2: Formatting dates**\n```javascript\nconst instance = HSDatepicker.getInstance('.hs-datepicker', true);\n\nif (instance) {\n const { element } = instance;\n // Format a date\n const formatted = element.formatDate(new Date(), 'YYYY-MM-DD');\n\n console.log('Formatted date:', formatted);\n}\n```\n\n**Example 3: Destroying datepicker instance**\n```javascript\nconst instance = HSDatepicker.getInstance('.hs-datepicker', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('.hs-datepicker').remove();\n });\n}\n```\n\n## Events\n\nDatepicker instances emit events that can be listened to for date selection lifecycle hooks.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:change` | When the selected date or time changes | `{ selectedDates: string[], selectedTime: string }` (current selection state) | Fires after the user picks a date or changes the time. The payload matches the shape returned by `getCurrentState()`. |\n\n### Event Usage Example\n\n```javascript\n// Get datepicker instance\nconst instance = HSDatepicker.getInstance('.hs-datepicker', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen for date or time changes\n element.on('change', ({ selectedDates, selectedTime }) => {\n console.log('Selected dates:', selectedDates);\n console.log('Selected time:', selectedTime);\n // Update dependent fields, validate form, etc.\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Custom Select Mode\n\nUse custom select inputs for months, years, and time.\n\n```html\n\n```\n\n### Pattern 2: Custom Date Format\n\nSet a custom date format and separator.\n\n```html\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/dropdown/README.md":"# Dropdown\n\nA dropdown menu displays a list of actions and more with JavaScript dropdown plugin.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/dropdown) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/dropdown.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Accessibility notes](#accessibility-notes)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe Dropdown component provides a menu that appears when triggered, displaying a list of actions or options. It supports multiple placement options, customizable triggers, keyboard navigation, and integrates with Floating UI for advanced positioning.\n\n**Key Features:**\n- Multiple placement options (top, bottom, left, right, auto)\n- Customizable trigger events (click, hover, contextmenu)\n- Floating UI integration for smart positioning\n- Keyboard navigation support (Arrow keys, Home, End, Esc, A-Z)\n- Programmatic control via JavaScript API\n- Event system for lifecycle hooks\n- Accessibility attributes (ARIA) built-in\n\n## Installation\n\nTo get started, install Dropdown plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i @preline/dropdown\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/dropdown */\n@source \"../node_modules/@preline/dropdown/*.js\";\n@import \"./node_modules/@preline/dropdown/variants.css\";\n@import \"./node_modules/@preline/dropdown/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.\n\n`@preline/dropdown` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport \"@preline/dropdown\";\n```\n\n`@preline/dropdown/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport HSDropdown from \"@preline/dropdown/non-auto\";\n\nHSDropdown.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#dropdown\");\nif (el) new HSDropdown(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a dropdown component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The dropdown menu appears when clicking the button.\n\n```html\n
\n \n\n \n
\n```\n\n**Structure Requirements:**\n- `hs-dropdown`: Required container wrapper\n- `hs-dropdown-toggle`: Required button element that triggers the dropdown\n- `hs-dropdown-menu`: Required container for dropdown menu items\n- Proper ARIA attributes (`aria-expanded`, `aria-label`, `role=\"menu\"`, `aria-labelledby`)\n\n**Initial State:**\n- Set `aria-expanded=\"false\"` on the toggle button initially\n- Add `hidden` class to the dropdown menu initially\n- Menu visibility is controlled by `hs-dropdown-open:*` modifier classes\n\n## Accessibility notes\n\n### Keyboard interactions\n\n| Command | Description |\n| --- | --- |\n| Enter | Activates the selected menu item. |\n| ArrowUp / ArrowDown | Focuses previous/next non-disabled item. |\n| Home / End | Focuses first/last non-disabled item. |\n| Esc | Closes any open dropdown menus. |\n| A-Z / a-z | Focuses first item that matches keyboard input. |\n\n## Configuration Options\n\n### Data Attributes\n\nData attributes are added directly to HTML elements to configure dropdown behavior.\n\n| Attribute | Target Element | Type | Default | Description |\n| --- | --- | --- | --- | --- |\n| `data-hs-dropdown-transition` | `hs-dropdown` (container) | - | - | Data attribute to designate the container to be animated. When present, enables transition animations for the dropdown menu. |\n\n### CSS Classes (Modifiers)\n\nCSS class modifiers use Tailwind-style syntax with `--` prefix to control dropdown behavior.\n\n| Class Modifier | Target Element | Values | Default | Description |\n| --- | --- | --- | --- | --- |\n| `[--placement:*]` | `hs-dropdown` (container) | `\"auto\"` \\| `\"auto-start\"` \\| `\"auto-end\"` \\| `\"top\"` \\| `\"top-left\"` \\| `\"top-right\"` \\| `\"bottom\"` \\| `\"bottom-left\"` \\| `\"bottom-right\"` \\| `\"right\"` \\| `\"right-start\"` \\| `\"right-end\"` \\| `\"left\"` \\| `\"left-start\"` \\| `\"left-end\"` | `\"bottom\"` | Specifies the position of the menu when opened relative to the toggle button. |\n| `[--scope:*]` | `hs-dropdown` (container) | `\"window\"` \\| `\"parent\"` | `\"parent\"` | Determines whether the dropdown will be moved outside the parent, for correct display in elements with hidden overflow. Requires the `Floating UI` plugin. |\n| `[--auto-close:*]` | `hs-dropdown` (container) | `\"inside\"` \\| `\"outside\"` \\| `\"false\"` \\| `\"true\"` | `\"true\"` | Specifies the zone, when clicked, which will close the menu. `inside` closes only when clicking inside, `outside` closes only when clicking outside, `true` closes on any click, `false` prevents auto-close. |\n| `[--has-autofocus:*]` | `hs-dropdown` (container) | `\"true\"` \\| `\"false\"` | `\"true\"` | Disables autofocus on the first focusable element when opening a dropdown. Set to `\"false\"` to disable autofocus. |\n| `[--strategy:*]` | `hs-dropdown` (container) | `\"fixed\"` \\| `\"absolute\"` | `\"fixed\"` | Sets the position strategy. `fixed` positions relative to viewport, `absolute` positions relative to the nearest positioned ancestor. |\n| `[--adaptive:*]` | `hs-dropdown` (container) | `\"none\"` \\| `\"adaptive\"` | `\"adaptive\"` | Used to disable horizontal position calculations (useful for dropdown menus that span the full width of the screen) while still calculating the vertical position. |\n| `[--gpu-acceleration:*]` | `hs-dropdown` (container) | `\"true\"` \\| `\"false\"` | `\"false\"` | Disable/enable position calculation using the transform property. Set to `\"true\"` to enable GPU acceleration. |\n| `[--offset:*]` | `hs-dropdown` (container) | number | `10` | Sets the dropdown's bottom or top offset in pixels. |\n| `[--flip:*]` | `hs-dropdown` (container) | `\"true\"` \\| `\"false\"` | `\"true\"` | Flips the menu's placement when it starts to overlap its reference element. Set to `\"false\"` to disable flipping. |\n| `[--trigger:*]` | `hs-dropdown` (container) | `\"hover\"` \\| `\"click\"` \\| `\"contextmenu\"` | `\"click\"` | Event to trigger a dropdown. `hover` shows on mouse enter, `click` shows on click, `contextmenu` shows on right-click. |\n\n**Example:**\n```html\n
\n \n
Menu content
\n
\n```\n\n### Required CSS Classes\n\nThese classes define the structure and must be present for the dropdown to function.\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-dropdown` | Container wrapper | Groups the toggle and menu elements together |\n| `hs-dropdown-toggle` | Button element | The clickable element that activates the dropdown |\n| `hs-dropdown-menu` | Menu container | The dropdown menu that appears on trigger |\n\n### Optional CSS Classes\n\n| Class | Required On | Purpose |\n| --- | --- | --- |\n| `hs-dropdown-toggle-wrapper` | Wrapper element | A wrapper for a Dropdown toggle, useful when some other element is placed in the Dropdown toggle. For example, if you want to place a \"+\" button inside an existing Dropdown toggle button that opens a modal. |\n| `hs-dropdown-close` | Close element | Dropdown close element (can be multiple). Elements with this class will close the dropdown when clicked. |\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-dropdown-open:*` | The modifier that allows you to set Tailwind classes when the dropdown menu is open. |\n\n## JavaScript API\n\nThe `HSDropdown` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a dropdown instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `open(target, openedViaKeyboard)` | `target`: `VirtualElement \\| HTMLElement` (optional)
`openedViaKeyboard`: `boolean` (optional) | `boolean` | Forces the dropdown menu to open programmatically. Returns `true` if opened successfully, `false` otherwise. |\n| `close(isAnimated)` | `isAnimated`: `boolean` (optional) | `boolean` | Forces the dropdown menu to close programmatically. `isAnimated` indicates whether the dropdown menu is closed with animation. Returns `true` if closed successfully, `false` otherwise. |\n| `forceClearState()` | None | `void` | Destroys dropdown state without removing the instance. Use to reset dropdown to initial state. |\n| `destroy()` | None | `void` | Destroys the dropdown instance, removes all generated markup, classes, and event listeners. Use when removing dropdown from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSDropdown` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSDropdown.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HSDropdown \\| { id: string \\| number, element: HSDropdown } \\| null` | Returns the dropdown instance associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSDropdown` instance. If `isInstance` is `false` or omitted, returns the `HSDropdown` instance directly. Returns `null` if dropdown instance is not found. |\n| `HSDropdown.open(target, openedViaKeyboard)` | `target`: `HSDropdown \\| HTMLElement \\| string` (CSS selector)
`openedViaKeyboard`: `boolean` (optional) | `void` | Opens the dropdown identified by target. Accepts a dropdown instance, DOM element, or CSS selector string. Static alternative to instance `open()` method. |\n| `HSDropdown.close(target)` | `target`: `HSDropdown \\| HTMLElement \\| string` (CSS selector) | `void` | Closes the dropdown identified by target. Accepts a dropdown instance, DOM element, or CSS selector string. Static alternative to instance `close()` method. |\n\n### Usage Examples\n\n**Example 1: Using instance methods (public API)**\n```javascript\n// Create a new dropdown instance\nconst dropdown = new HSDropdown(document.querySelector('#hs-dropdown'));\nconst openBtn = document.querySelector('#hs-open-btn');\n\n// Open dropdown programmatically\nopenBtn.addEventListener('click', () => {\n dropdown.open();\n});\n```\n\n**Example 2: Using static methods**\n```javascript\nconst openBtn = document.querySelector('#hs-open-btn');\n\n// Open dropdown using static method (no instance needed)\nopenBtn.addEventListener('click', () => {\n HSDropdown.open('#hs-dropdown');\n});\n```\n\n**Example 3: Getting instance and using methods (recommended pattern)**\n```javascript\n// Get the dropdown instance\nconst instance = HSDropdown.getInstance('#hs-dropdown', true);\n\nif (instance) {\n const { element } = instance; // element is the HSDropdown instance\n const openBtn = document.querySelector('#hs-open-btn');\n\n // Use instance methods\n openBtn.addEventListener('click', () => {\n element.open();\n });\n\n // Clean up when removing from DOM\n function removeDropdown() {\n element.destroy();\n }\n}\n```\n\n**Example 4: Destroying dropdown instance**\n```javascript\nconst instance = HSDropdown.getInstance('#hs-dropdown', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-dropdown').remove();\n });\n}\n```\n\n## Events\n\nDropdown instances emit events that can be listened to for lifecycle hooks and custom behavior.\n\n| Event Name | When Fired | Callback Parameter | Description |\n| --- | --- | --- | --- |\n| `on:open` | After dropdown menu is opened | `HSDropdown` (dropdown instance) | Fires after the dropdown menu has been displayed. Use for post-open actions like loading content or tracking analytics. |\n| `on:close` | After dropdown menu is closed | `HSDropdown` (dropdown instance) | Fires after the dropdown menu has been hidden. Use for cleanup or state updates. |\n\n### Event Usage Example\n\n```javascript\n// Get dropdown instance\nconst instance = HSDropdown.getInstance('#hs-dropdown', true);\n\nif (instance) {\n const { element } = instance;\n\n // Listen to open event\n element.on('open', (dropdownInstance) => {\n console.log('Dropdown opened:', dropdownInstance);\n // Perform actions after dropdown opens\n // e.g., load content, update UI, track analytics\n });\n\n // Listen to close event\n element.on('close', (dropdownInstance) => {\n console.log('Dropdown closed:', dropdownInstance);\n // Perform cleanup or state updates\n });\n}\n```\n\n## Common Patterns\n\n### Pattern 1: Hover Trigger\n\nShow dropdown on hover instead of click.\n\n```html\n
\n \n
Menu content
\n
\n```\n\n### Pattern 2: Programmatic Control\n\nControl dropdown from external buttons.\n\n```html\n
\n \n
Menu content
\n
\n\n\n\n\n\n```\n\n## License\n\nCopyright (c) 2024 Htmlstream.\n\nLicensed under the [MIT License](https://opensource.org/licenses/MIT).\n","src/plugins/file-upload/README.md":"# File Upload\n\nTailwind CSS File Upload plugin using Dropzone library to enable drag-and-drop functionality, previews, and progress bars.\n\n[![npm](https://img.shields.io/badge/npm-v4.2.0-blue)](https://www.npmjs.com/package/@preline/file-upload) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Demo](https://img.shields.io/badge/demo-online-brightgreen)](https://preline.co/plugins/file-upload.html)\n\n## Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Basic usage](#basic-usage)\n- [Configuration Options](#configuration-options)\n- [JavaScript API](#javascript-api)\n- [Events](#events)\n- [Common Patterns](#common-patterns)\n- [License](#license)\n\n## Overview\n\nThe File Upload component provides a drag-and-drop file upload interface with preview functionality, progress tracking, and integration with Dropzone.js. It supports multiple file uploads, file type validation, and customizable preview templates.\n\n**Key Features:**\n- Drag-and-drop file upload\n- File previews with thumbnails\n- Upload progress tracking\n- Multiple file support\n- File type and extension validation\n- Integration with Dropzone.js\n- Programmatic control via JavaScript API\n- Event system for upload tracking\n\n## Installation\n\nTo get started, install File Upload plugin via npm, else you can skip this step if you are already using Preline UI as a package.\n\n```bash\nnpm i lodash dropzone @preline/file-upload\n```\n\n### CSS\n\nUse [`@source`](https://tailwindcss.com/docs/functions-and-directives#source-directive) to register the plugin's JavaScript path for Tailwind CSS scanning, then [`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS files into your Tailwind CSS file.\n\n```css\n@import \"tailwindcss\";\n\n/* @preline/file-upload */\n@source \"../node_modules/@preline/file-upload/*.js\";\n@import \"./node_modules/@preline/file-upload/variants.css\";\n@import \"./node_modules/@preline/file-upload/theme.css\";\n```\n\n### JavaScript\n\nInclude the JavaScript that powers the interactive elements near the end of your `` tag:\n\n```html\n\n\n\n```\n\n### Manual Initialization\n\nUse the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.\n\n```html\n\n\n\n```\n\n### Via Bundler\n\nWhen using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module. `Dropzone` and `_` (Lodash) are referenced as globals, so expose them on `window` before importing the plugin.\n\n`@preline/file-upload` is the auto-init entry: it scans the DOM and initializes matching elements automatically.\n\n```js\nimport _ from \"lodash\";\nwindow._ = _;\nimport Dropzone from \"dropzone\";\nwindow.Dropzone = Dropzone;\n\nimport \"@preline/file-upload\";\n```\n\n`@preline/file-upload/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.\n\n```js\nimport _ from \"lodash\";\nwindow._ = _;\nimport Dropzone from \"dropzone\";\nwindow.Dropzone = Dropzone;\n\nimport HSFileUpload from \"@preline/file-upload/non-auto\";\n\nHSFileUpload.autoInit();\n\n// Or initialize a specific element manually\nconst el = document.querySelector(\"#file-upload\");\nif (el) new HSFileUpload(el);\n```\n\n### TypeScript\n\nThis package ships with TypeScript type definitions. No additional `@types/` package is needed.\n\n## Basic usage\n\nThe following example demonstrates the minimal HTML structure required for a file upload component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. The component supports drag-and-drop and file previews.\n\n```html\n
\n \n\n
\n Drop your file here or browse\n
\n\n
\n
\n```\n\n**Structure Requirements:**\n- `data-hs-file-upload`: Required on the container element, contains configuration options\n- `data-hs-file-upload-preview`: Required template element for file previews (should be a `
`) | A modifier that allows you to disable the ordering functionality in a column. Should be added to the thead column. |\n\n### Required CSS Classes / Data Attributes\n\nThese data attributes define the structure and must be present for specific features to function.\n\n| Data Attribute | Required On | Purpose |\n| --- | --- | --- |\n| `data-hs-datatable-search` | Input element | Defines which element will be responsible for searching in the datatable (must be an `input`). |\n| `data-hs-datatable-page-entities` | Select element | Determines which element will be responsible for switching the number of elements on the page (must be a `select`, depends on the change event). |\n| `data-hs-datatable-paging` | Container element | Defines a paging container, that contains pagination, next and previous buttons. |\n| `data-hs-datatable-paging-prev` | Button element | Defines a previous button element. |\n| `data-hs-datatable-paging-next` | Button element | Defines a next button element. |\n| `data-hs-datatable-row-selecting-all` | Checkbox/Radio element | Defines a \"Select all\" checkbox/radio, if it's not specified in the `rowSelectingOptions.selectAllSelector` parameter. |\n| `data-hs-datatable-row-selecting-individual` | Checkbox/Radio element | Defines a checkbox/radio that will be responsible for selecting a specific row if it is not specified in the `rowSelectingOptions.individualSelector` parameter. |\n| `data-hs-datatable-info` | Container element | Defines an info container. |\n| `data-hs-datatable-info-from` | Element | Defines an element that showing `start` number. |\n| `data-hs-datatable-info-to` | Element | Defines an element that showing `end` number. |\n| `data-hs-datatable-info-length` | Element | Defines an element that showing `recordsTotal` number. |\n\n### Tailwind Modifiers\n\n| Name | Description |\n| --- | --- |\n| `hs-datatable-ordering-asc:*` | A modifier that allows you to set Tailwind classes to elements inside `thead th` or `thead td` when ordering changes to `asc`. |\n| `hs-datatable-ordering-desc:*` | A modifier that allows you to set Tailwind classes to elements inside `thead th` or `thead td` when ordering changes to `desc`. |\n\n## JavaScript API\n\nThe `HSDataTable` object is available in the global `window` object after the plugin is loaded.\n\n### Instance Methods\n\nThese methods are called on a datatable instance.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `destroy()` | None | `void` | Destroys the datatable instance, removes all generated markup, classes, and event listeners. Use when removing datatable from DOM. |\n\n### Static Methods\n\nThese methods are called directly on the `HSDataTable` class.\n\n| Method | Parameters | Return Type | Description |\n| --- | --- | --- | --- |\n| `HSDataTable.getInstance(target, isInstance)` | `target`: `HTMLElement \\| string` (CSS selector)
`isInstance`: `boolean` (optional) | `HTMLElement \\| { id: string \\| number, element: HSDataTable } \\| null` | Returns the datatable instance or element associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSDataTable` instance. If `isInstance` is `false` or omitted, returns the DOM element (`HTMLElement`). Returns `null` if datatable instance is not found. |\n\n### Usage Examples\n\n**Example 1: Accessing DataTables.net instance**\n```javascript\n// Get the datatable instance\nconst instance = HSDataTable.getInstance('#hs-datatable', true);\n\nif (instance) {\n const { element } = instance;\n // Access underlying DataTables.net instance\n const { dataTable } = element;\n\n if (dataTable) {\n // Use DataTables.net methods\n dataTable.search('query').draw();\n }\n}\n```\n\n**Example 2: Destroying datatable instance**\n```javascript\nconst instance = HSDataTable.getInstance('#hs-datatable', true);\n\nif (instance) {\n const { element } = instance;\n const destroyBtn = document.querySelector('#hs-destroy-btn');\n\n destroyBtn.addEventListener('click', () => {\n element.destroy();\n });\n}\n```\n\n**Example 3: Destroying datatable instance**\n```javascript\nconst instance = HSDataTable.getInstance('#hs-datatable', true);\n\nif (instance) {\n const { element } = instance;\n const removeBtn = document.querySelector('#hs-remove-btn');\n\n removeBtn.addEventListener('click', () => {\n // Clean up before removing from DOM\n element.destroy();\n // Now safe to remove the element\n document.querySelector('#hs-datatable').remove();\n });\n}\n```\n\n## Events\n\n> **Note:** Please note that this component requires the use of the [Datatables.net](https://datatables.net/) plugin. Most events available in the plugin are available in our wrapper.\n\nDatatable instances emit events through the underlying DataTables.net instance. Access the DataTables.net instance via `element.dataTable` to listen to events.\n\n**Common DataTables.net Events:**\n- `draw` - When table is redrawn\n- `order` - When column ordering changes\n- `search` - When search is performed\n- `page` - When page changes\n- `select` - When row is selected\n- `deselect` - When row is deselected\n\n### Event Usage Example\n\n```javascript\n// Get datatable instance\nconst instance = HSDataTable.getInstance('#hs-datatable', true);\n\nif (instance) {\n const { element } = instance;\n const { dataTable } = element;\n\n if (dataTable) {\n // Listen to draw event\n dataTable.on('draw.dt', () => {\n console.log('Table redrawn!');\n // Perform actions after table redraws\n // e.g., update UI, reinitialize plugins\n });\n\n // Listen to order event\n dataTable.on('order.dt', () => {\n console.log('Column ordering changed!');\n });\n\n // Listen to search event\n dataTable.on('search.dt', () => {\n console.log('Search performed!');\n });\n }\n}\n```\n\n## Common Patterns\n\n### Pattern 1: With Search\n\nAdd search functionality to the datatable.\n\n```html\n\n\n
\n \n
\n```\n\n### Pattern 2: With Row Selection\n\nEnable row selection with checkboxes.\n\n```html\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n
\n```\n\n### Pattern 3: Exclude Column from Ordering\n\nDisable sorting on specific columns.\n\n```html\n		\n Actions\n