open-index/open-npm huggingface dataset:
npm package: @outbook/commons-form
Description: Templates for form web components
Author: Antonio Rodríguez
Latest version: 1.0.0

# @outbook/commons-form

Shared utilities, templates, and styles for form-related web components in the Outbook Toolkit.

## Installation

```bash
npm install @outbook/commons-form
```

## API Reference

### JavaScript Utilities

#### `renderDescription({ description, descriptionId, testId })`
Renders a small informational notification alert (`@outbook/webcomponents-notification-alert`) if a description is provided.

- `description`: The text content to display.
- `descriptionId`: The ID to assign to the description element (for ARIA).
- `testId`: Optional test ID suffix.

#### `renderError({ inputInvalid, validateMessage, literals, descriptionId, testId })`
Renders a small error notification alert if `inputInvalid` is true.

- `inputInvalid`: Boolean indicating if the field is in an invalid state.
- `validateMessage`: Custom error message.
- `literals`: Object containing fallback validation strings (e.g., `literals.validation.fieldMandatory`).
- `descriptionId`: The ID to assign to the error element (for ARIA).
- `testId`: Optional test ID suffix.

#### `isAttributeEnabled(value)`
A helper function to determine if a boolean-like attribute is enabled. It returns `true` if the value is `true`, an empty string (boolean attribute presence), `'true'`, or `'disabled'`.

---

### SCSS Styles

The package provides a common SCSS mixin to ensure consistent styling across form components.

#### `@mixin style()`
Includes base styles for form elements, including:
- Variables for padding, colors (light/dark mode support), and borders.
- Styles for `.form-element`, `.form-element__label`, `.form-element__input`, and `.form-element__description`.
- States for `.is-invalid` and `.is-disabled`.

**Usage:**
```scss
@use '@outbook/commons-form/common-form' as common;

:host {
  @include common.style();
}
```

## Dependencies

- `@outbook/design-decisions`: For measures and tokens.
- `@outbook/colorful`: For palette colors.
- `@outbook/webcomponents-notification-alert`: For rendering messages.
- `lit`: Peer dependency for templates.
npm package: @outbook/design-decisions
Description: Web components design decisions
Author: Antonio Rodríguez
Latest version: 1.1.8

# @outbook/design-decisions

This package provides a centralized and version-controlled way to manage and reuse the foundational design choices for our web components. It ensures a consistent look and feel across all components by offering a common set of SCSS variables and rules.

## Installation

To use these design decisions in your project, you'll need to have [Sass](https://sass-lang.com/) installed. You can then install this package via npm (or your preferred package manager):

```bash
npm install @outbook/design-decisions
```

## Usage

This package exposes SCSS variables and mixins that you can use in your own stylesheets.

### Unified Entry Point

You can use the main entry point to access all design decisions. Each module is prefixed with its name.

```scss
@use "@outbook/design-decisions" as design;

.my-component {
  padding: design.$measures-baseline;
  @include design.a11y-sr-only();
}
```

### Individual Modules

Alternatively, you can import specific modules directly.

#### A11y
Accessibility helpers.
```scss
@use "@outbook/design-decisions/a11y" as a11y;

.screen-reader-only {
  @include a11y.sr-only();
}
```

#### Animation Pulse
Skeleton loader animation.
```scss
@use "@outbook/design-decisions/animation-pulse" as animation;

.skeleton {
  --pulse-bg-start: #eee;
  --pulse-bg-end: #ddd;
  @include animation.background();
}
```

#### Breakpoints
Responsive design breakpoints.
```scss
@use "@outbook/design-decisions/breakpoints" as bp;

@media (min-width: bp.$default-m) {
  // Styles for medium screens
}
```

#### Color
Design tokens for colors and themes.
```scss
@use "@outbook/design-decisions/color" as design-color;

.text {
  color: design-color.$text--light;
}
```

#### Container
Mixins for standard layouts.
```scss
@use "@outbook/design-decisions/container" as container;

.main-content {
  @include container.default();
}
```

#### Crystal
Mixins for glassmorphism effects.
```scss
@use "@outbook/design-decisions/crystal" as crystal;

.glass-panel {
  @include crystal.default();
}
```

#### Dialog
Variables for dialog and header dimensions.
```scss
@use "@outbook/design-decisions/dialog" as dialog;

.header {
  height: dialog.$header-height;
}
```

#### Measures
Spacing, radius, and sizing variables.
```scss
@use "@outbook/design-decisions/measures" as measures;

.card {
  border-radius: measures.$radius-m;
  padding: measures.$baseline;
}
```

#### Outline
Standardized focus outlines.
```scss
@use "@outbook/design-decisions/outline" as outline;

.button:focus {
  @include outline.default();
}
```

#### Table
Standardized table styles.
```scss
@use "@outbook/design-decisions/table" as table;

.data-table {
  @include table.default();
}
```

#### Transition
Animation and transition timing helpers.
```scss
@use "@outbook/design-decisions/transition" as transition;

.element {
  @include transition.main();
}
```

## License

This package is licensed under the Apache-2.0 License.
npm package: @outbook/hooks
Description: A collection of hooks for Haunted web components.
Author: Antonio Rodríguez
Latest version: 1.0.2

# @outbook/hooks

Custom hooks for web components built with Haunted.

## `useLangObserver`

A custom hook to observe changes to the `lang` attribute on a custom element. It provides the current language of the element, falling back to a default if `lang` is not set.

### Usage

```javascript
import { component, html } from 'haunted';
import { useLangObserver } from '@outbook/hooks';

function MyElement() {
  const element = this; // 'this' refers to the custom element instance
  const currentLang = useLangObserver(element, 'en');

  // You can now use 'currentLang' in your component's logic or render method
  console.log('Current language:', currentLang);

  return html`<p>Hello in ${currentLang}!</p>`;
}

customElements.define('my-element', component(MyElement));
```

### Parameters

-   `element`: The custom element to observe.
-   `defaultLang`: (Optional) The default language to use if the `lang` attribute is not set on the element. Defaults to `'en'`.

### Returns

-   `string`: The current language of the element.

## License

Apache 2.0
npm package: @outbook/icons
Description: A collection of icons.
Author: Antonio Rodríguez
Latest version: 1.3.1

# @outbook/icons

## License & Attribution

The icons in this package are generated from [Material Symbols](https://fonts.google.com/icons) by Google.

- **Source:** [Google Fonts](https://fonts.google.com/icons)
- **License:** [Apache License Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
npm package: @outbook/lumin-mystic
Description: Light/Dark management
Author: Antonio Rodríguez
Latest version: 3.0.1

# Lumin Mystic

**Important:** from versión 2 there is no backwards compatibility with previous versions.

Init LuminMystic:
```javascript
import { LuminMystic } from '@arr2019/lumin-mystic';
const myAmbientHandler = new LuminMystic({
  storageContext: 'local', // local | session
  classDark: 'is-dark', // dark ambient class
  eventFn: () => true // function for change ambient event
});
myAmbientHandler.init(); // init ambient handler
```

Get constants:
```javascript
myAmbientHandler.AMBIENT_SELECTED // get current selected ambient
myAmbientHandler.AMBIENT_LIGHT // light ambient constant
myAmbientHandler.AMBIENT_DARK // dark ambient constant
myAmbientHandler.AMBIENT_AUTO // auto ambient constant
```

Set ambient:
```javascript
myAmbientHandler.setAmbient({ ambient: myAmbientHandler.AMBIENT_DARK }); // set ambient

```
npm package: @outbook/numbers
Description: Checks if a number is even, odd, integer
Author: Antonio Rodríguez
Latest version: 1.0.1

# @outbook/numbers

Checks if a number is even, odd or integer.

## Installation

```bash
npm install @outbook/numbers
```

## Usage

```javascript
import { isEven, isOdd, isInteger } from '@outbook/numbers';

// isEven
console.log(isEven(2)); // true
console.log(isEven(3)); // false
try {
  isEven(3.14);
} catch (err) {
  console.log(err.message); // 'Argument must be an integer!'
}

// isOdd
console.log(isOdd(3)); // true
console.log(isOdd(2)); // false
try {
  isOdd(3.14);
} catch (err) {
  console.log(err.message); // 'Argument must be an integer!'
}

// isInteger
console.log(isInteger(3)); // true
console.log(isInteger(3.14)); // false
```

## Running Tests

To run the tests, use the following command:

```bash
npm test
```
npm package: @outbook/random-integer
Description: Random integer function, with minimum and maximum values
Author: Antonio Rodríguez
Latest version: 1.0.2

# @outbook/random‑integer

Import and use it:

````javascript
// ES‑module syntax (recommended)
import { randomInteger } from '@arr2019/random-integer';

// Basic call – returns an integer in [0, 10) (10 is exclusive)
const n1 = randomInteger({ min: 0, max: 10 });
console.log(n1); // 0 … 9

// Inclusive upper bound
const n2 = randomInteger({ min: 0, max: 10, inclusive: true });
console.log(n2); // 0 … 10

// Rely on defaults (min = 0, max = 10, exclusive)
const n3 = randomInteger(); // same as randomInteger({})
console.log(n3);

````
npm package: @outbook/shuffle
Description: Returns a new array with its elements shuffled using the Fisher–Yates algorithm
Author: Antonio Rodríguez
Latest version: 1.0.2

# @outbook/shuffle

Returns a new array with its elements shuffled using the Fisher-Yates algorithm.

## Install

```bash
npm install @outbook/shuffle
```

## Usage

```js
import { shuffle } from '@outbook/shuffle';

const original = ['a', 'b', 'c', 'd'];
const result = shuffle(original);

console.log(result);
// Example: ['c', 'a', 'd', 'b']

console.log(original);
// ['a', 'b', 'c', 'd']
```

## API

### `shuffle(source)`

Returns a shuffled copy of `source`.

- `source`: `Array` to shuffle.
- Returns: a new `Array` containing the same elements in random order.

Behavior:

- Does not mutate the original array.
- Uses a shallow copy of the input array.
- Works well for common application-level randomization where `Math.random()` is acceptable.

## Notes

- The package exposes a named `shuffle` export.
- Shuffling is random, so output order will vary between calls.

## Development

Source files live in [`src/`](./src). The public entry point is [`index.js`](./index.js).
npm package: @outbook/webcomponents-badge-file-extension
Description: Web components badge-file-extension
Author: Antonio Rodríguez
Latest version: 1.2.2

# @outbook/webcomponents-badge-file-extension

This package provides a web component to display a file extension badge.

## Installation

```bash
npm install @outbook/webcomponents-badge-file-extension
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {BadgeFileExtension} from '@outbook/webcomponents-badge-file-extension';

function render() {
  return html`
  return html`
    ${BadgeFileExtension({
    text: 'pdf'
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-badge-file-extension';
```

```html
<outbook-badge-file-extension text="pdf"></outbook-badge-file-extension>
```

## Component: `outbook-badge-file-extension`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute      | Property     | Type      | Default     | Description                                                     |
|----------------|--------------|-----------|-------------|-----------------------------------------------------------------|
| `text`         | `text`       | `String`  | `''`        | The text to display in the badge.                               |
| `extraClasses` | `extraClasses` | `String`  | `undefined` | Classes to add to the host element.                             |

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                                       | Description       |
|-------------------------------------------------------|-------------------|
| `--outbook-badge-file-extension--border-color`        | The border color. |
| `--outbook-badge-file-extension--text-color`          | The text color.   |

## License

This component is licensed under the Apache-2.0 License.
npm package: @outbook/webcomponents-clip-flag
Description: Web components clip-flag
Author: Antonio Rodríguez
Latest version: 1.0.4

# @outbook/webcomponents-clip-flag

This package provides a web component to display a clip flag.

## Installation

```bash
npm install @outbook/webcomponents-clip-flag
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {ClipFlag} from '@outbook/webcomponents-clip-flag';

function render() {
  return html`
    ${ClipFlag({
    code: 'es'
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-clip-flag';
```

```html
<outbook-clip-flag code="es"></outbook-clip-flag>
```

## Component: `outbook-clip-flag`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute      | Property       | Type      | Default     | Description                         |
|----------------|----------------|-----------|-------------|-------------------------------------|
| `code`         | `code`         | `String`  | `''`        | The country code for flag.          |
| `extraClasses` | `extraClasses` | `String`  | `undefined` | Classes to add to the host element. |

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

## License

This component is licensed under the Apache-2.0 License.

Flags are provided by [country-flag-icons](https://gitlab.com/catamphetamine/country-flag-icons) under MIT license.
npm package: @outbook/webcomponents-scrollable
Description: Web components scrollable
Author: Antonio Rodríguez
Latest version: 1.0.2

# @outbook/webcomponents-scrollable

This package provides a web component for creating a scrollable area with overflow indicators.

## Installation

```bash
npm install @outbook/webcomponents-scrollable
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {Scrollable} from '@outbook/webcomponents-scrollable';

function render() {
  return html`
    ${Scrollable({
    content: () => html`<p>Some long content that will scroll.</p>`
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-scrollable';
```

```html
<outbook-scrollable>
  <p>Some long content that will scroll.</p>
</outbook-scrollable>
```

## Component: `outbook-scrollable`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute                    | Property                   | Type      | Default     | Description                                                                                             |
|------------------------------|----------------------------|-----------|-------------|---------------------------------------------------------------------------------------------------------|
| `event-scroll-to-playing-item` | `eventScrollToPlayingItem` | `Boolean`   | `false`     | Listens for a `scrollToPlayingItem` document event and scrolls to the `selectedPosition` in the event detail. |
| `event-scroll-to-top`        | `eventScrollToTop`         | `Boolean`   | `false`     | Listens for a `scrollToTop` document event and scrolls the content to the top.                               |
| `extraClasses`               | `extraClasses`             | `String`    | `undefined` | Classes to add to the host element.                                                                     |


### Slots

| Name    | Description                               |
|---------|-------------------------------------------|
|         | The content to be made scrollable.        |

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                                  | Description                   |
|--------------------------------------------------|-------------------------------|
| `--outbook-scrollable--indicator-max-width`      | The max width of the indicator. |
| `--outbook-scrollable--indicator-color`          | The color of the indicator.     |

## License

This component is licensed under the Apache-2.0 License.
npm package: @outbook/webcomponents-type-title
Description: Web components type-title
Author: Antonio Rodríguez
Latest version: 1.1.2

# @outbook/webcomponents-type-title

This package provides a web component for displaying a title with primary and optional secondary text.

## Installation

```bash
npm install @outbook/webcomponents-type-title
```

## Usage

### As a Lit Element (using the wrapper function)

```javascript
import {html} from 'lit';
import {TypeTitle} from '@outbook/webcomponents-type-title';

function render() {
  return html`
    ${TypeTitle({
    primary: 'Main Title',
    secondary: 'Subtitle goes here'
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-type-title';
```

```html
<outbook-type-title primary="Main Title" secondary="Subtitle goes here"></outbook-type-title>
```

## Component: `outbook-type-title`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute   | Property    | Type     | Default     | Description                      |
|-------------|-------------|----------|-------------|----------------------------------|
| `primary`   | `primary`   | `String` | `''`        | The main title text.             |
| `secondary` | `secondary` | `String` | `undefined` | The optional subtitle text.      |
| `extraClasses` | `extraClasses` | `String` | `undefined` | Classes to add to the host element.                             |

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                              | Description                          |
|----------------------------------------------|--------------------------------------|
| `--outbook-type-title--text-primary-color`   | Color for the primary title text.    |
| `--outbook-type-title--text-secondary-color` | Color for the secondary title text.  |

**Styling with Shadow Parts:**

You can use the `::part()` pseudo-element to style specific parts of the component from outside the Shadow DOM.

| Part Name          | Description                      |
|--------------------|----------------------------------|
| `primary-text`     | The `span` element displaying the primary title. |
| `secondary-text`   | The `span` element displaying the secondary title. |

Example:

```css
outbook-type-title::part(primary-text) {
  color: blue;
  font-weight: bold;
}

outbook-type-title::part(secondary-text) {
  color: gray;
  font-style: italic;
}
```

## License

This component is licensed under the Apache-2.0 License.