open-index/open-npm huggingface dataset:
npm package: @nextrap/element-highlighter
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.3-0

# nxa-element-highlighter

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build nxa-element-highlighter` to build the library.

## Running unit tests

Run `nx test nxa-element-highlighter` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/infiniscroll
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.1-0

# nxa-infiniscroll

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build nxa-infiniscroll` to build the library.

## Running unit tests

Run `nx test nxa-infiniscroll` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/nt-framework
Description: ## Decorators
Latest version: 1.1.1

# nt-framework

## Decorators

| Decorator                                             | Description                    |
| ----------------------------------------------------- | ------------------------------ |
| @eventListener(event_name, target = "this", options?) | Decorator to listen to events. |

## Examples

### Listening to Events

```ts
import { listenEvents } from 'nt-framework';

class MyComponent extends LitElement {
    @eventListener('click', 'this', { once: true })
    handleEvent(evt: Event) {
        console.log(`Received event: ${evt.type}`);
    }
}
```
npm package: @nextrap/nte-card
Description: Bootstrap-like card web component built with Lit. Supports header, image, body and footer slots. Optional full-height mode lets the card body expand to fill available space.
Latest version: 1.0.3

# nte-card

Bootstrap-like card web component built with Lit. Supports header, image, body and footer slots. Optional full-height mode lets the card body expand to fill available space.

## Visual Demo

```bash
nx dev nte-card
# open http://localhost:4000/demo/base.html
```

## Usage

Basic:

```html
<nte-card>
    <h3 slot="header">Card Header</h3>
    <p>Some main content</p>
    <div slot="footer">Card Footer</div>
</nte-card>
```

With image:

```html
<nte-card>
    <h3 slot="header">Card Header</h3>
    <img slot="image" src="https://placehold.co/600x400" alt="Placeholder" />
    <p>Some main content</p>
    <div slot="footer">Card Footer</div>
</nte-card>
```

Image wrapped in a paragraph (Static generators):

```html
<nte-card>
    <h3 slot="header">Card Header</h3>
    <p slot="image">
        <img src="https://placehold.co/600x400" alt="Placeholder" />
    </p>
    <p>Some main content</p>
    <div slot="footer">Card Footer</div>
</nte-card>
```

Full height fill:

```html
<section style="height: 300px; border: 1px dashed #ccc;">
    <nte-card fill style="height: 100%;">
        <h3 slot="header">Full-height Card</h3>
        <p>This card body grows to fill the available height.</p>
        <div slot="footer">Footer</div>
    </nte-card>
</section>
```

## Slots

- header: Content for the card header.
- image: Top image area. Accepts <img> or any markup; <p> wrappers are normalized.
- default: Main content (card body).
- footer: Footer content.

## Attributes

- fill (boolean): When present, the card uses flexbox to expand its body to fill available height.

## Styling (CSS custom properties)

- --card-bg
- --card-color
- --card-border-color
- --card-border-radius
- --card-box-shadow
- --card-spacer-x
- --card-spacer-y

Example:

```css
nte-card {
    --card-border-radius: 0.5rem;
    --card-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
```
npm package: @nextrap/nte-core
Description: ```ts export class CustomElmeent1 extends nextrap_element({logging: true, ...}) {
Latest version: 1.0.6

# Nextrap Element Core Package


## Define a new Element


```ts
export class CustomElmeent1 extends nextrap_element({logging: true, ...}) {
    
}
```

- List of all Features from [TrunkJS Browser Utils](https://github.com/trunkjs/trunkjs-monorepo/tree/main/packages/browser-utils)

## Features

### Logging Mixin (`logging: true`)


### Event Bindings Mixin (`eventBindings: true`)

###
npm package: @nextrap/nte-form
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.0

# nte-form

This library was generated with [Nx](https://nx.dev).

It provides `nte-form-input` and `nte-form-group` components.

## Building

Run `nx build nte-form` to build the library.

## Running unit tests

Run `nx test nte-form` to execute the unit tests via [Vitest](https://vitest.dev/).

## Developing

Run `nx serve nte-form` to serve the `index.html` for development.
npm package: @nextrap/nte-offcanvas
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.19

# nte-offcanvas

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build nte-offcanvas` to build the library.

## Running unit tests

Run `nx test nte-offcanvas` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/ntl-2col
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.4

# ntl-2col

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build ntl-2col` to build the library.

## Running unit tests

Run `nx test ntl-2col` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/ntl-core
Description: Short description of the component.
Latest version: 1.0.1

# ntl-core

Short description of the component.

## Example

| Attribute | Type   | Description          | Default |
| --------- | ------ | -------------------- | ------- |
| attr1     | string | Description of attr1 | 'value' |

### Attr1

Description of attr1.

### Attr2

Description of attr2.

## Example Usage
npm package: @nextrap/scroll-to-top
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.1.1-0

# nxa-scroll-to-top

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build nxa-scroll-to-top` to build the library.

## Running unit tests

Run `nx test nxa-scroll-to-top` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/style-base
Description: Defines the core css variables and container width. This package will not add any styles or classes to the document.
Latest version: 1.1.14

# style-base

Defines the core css variables and container width. This package will not add any styles or classes to
the document.

## Usage

Include the `style-base` package in your main document's stylesheet. The package provides both, scss sources
and a compiled css file.

To work and modify themes of scss use the scss sources:

```scss
@use '@nextrap/style-base' with (
    $primary: $primary,
    $accent: $accent
);
```

This will set up the core design tokens and responsive container widths for your application.

## Notes

**Important**: This package must not be included in the shadow DOM of components. Add it to
the main document's style only once.
npm package: @nextrap/style-button
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 0.0.6

# style-button

This library was generated with [Nx](https://nx.dev).

## Building

Run `nx build style-button` to build the library.

## Running unit tests

Run `nx test style-button` to execute the unit tests via [Vitest](https://vitest.dev/).
npm package: @nextrap/style-utils
Description: This library was generated with [Nx](https://nx.dev).
Latest version: 1.0.10

# style-utils

This library was generated with [Nx](https://nx.dev).

## Synopsis

This library provides the utility classes known from Bootstrap but without the Media Queries.

The can be used in combination with [TrunkJS Responsive](https://github.com/trunkjs/trunkjs-monorepo/tree/main/packages/responsive).

- [Utility Classes](https://getbootstrap.com/docs/5.3/utilities/)



## Contents

### Background

- `.bg-primary`
- `.bg-secondary`
- `.bg-success`