open-index/open-npm huggingface dataset:
npm package: @make-use-of/focus-visible
Description: Focus-visible library for accessible focus indicators.
Author: Abhimanyu Rana
Latest version: 0.1.0

# @make-use-of/focus-visible

Lightweight, dependency-free focus-visible polyfill for accessible focus indicators.

## Install

```bash
npm install @make-use-of/focus-visible
```

## Quick start

```js
import '@make-use-of/focus-visible';

// Auto-initializes on import. Add CSS:
```

```css
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}
```

## API

- **applyFocusVisible(scope?, options?): void** — manually apply polyfill to a document or shadow root.
  - `scope` (optional): Document, DocumentFragment, or ShadowRoot. Defaults to `document`.
  - `options.className` (optional): Custom class name instead of `'focus-visible'`.

```js
import { applyFocusVisible } from '@make-use-of/focus-visible';

// Apply to shadow root
const shadowRoot = element.attachShadow({ mode: 'open' });
applyFocusVisible(shadowRoot);

// Use custom class name
applyFocusVisible(document, { className: 'keyboard-focus' });
```

Notes:
- Shows focus ring for keyboard navigation, hides for mouse/touch clicks.
- Always shows focus for text inputs (input, textarea, contentEditable).
- Adds `.js-focus-visible` class to document root for CSS targeting.
- Works with shadow DOM.
npm package: @make-use-of/scroll-horiz
Description: Lightweight smooth horizontal scrolling. Respects prefers-reduced-motion.
Latest version: 0.1.0

# @make-use-of/scroll-horiz

Lightweight, dependency-free smooth horizontal scrolling for any element. Respects `prefers-reduced-motion`.

## Install

```bash
npm install @make-use-of/scroll-horiz
```

## Quick start

```js
import scrollHoriz from '@make-use-of/scroll-horiz';

// Call once on the client (e.g., after mount)
scrollHoriz();

// Then use the standard API
document.querySelector('.carousel').scrollBy(300, 0);
```

## API

- **scrollHoriz(): void** — initializes the enhancer.
- After init, `element.scrollBy(x, y)` performs smooth horizontal scrolling when motion is allowed.

Notes:
- Honors `prefers-reduced-motion: reduce` (instant scroll, no animation).
- Works even if the browser supports CSS `scroll-behavior`.
- Use in browser-only lifecycles (`useEffect`, `onMounted`, etc.).