open-index/open-npm huggingface dataset:
npm package: @sage-box/badge
Description: Badge component for SageBox - Labels, tags and status indicators
Author: adravilag
Latest version: 0.1.1

# @sage-box/badge

> Badge component for SageBox - Labels, tags and status indicators

## Installation

```bash
npm install @sage-box/badge @sage-box/core
```

## Usage

```html
<!-- Basic -->
<sg-badge>Default</sg-badge>

<!-- Variants -->
<sg-badge variant="primary">Primary</sg-badge>
<sg-badge variant="secondary">Secondary</sg-badge>
<sg-badge variant="success">Success</sg-badge>
<sg-badge variant="warning">Warning</sg-badge>
<sg-badge variant="error">Error</sg-badge>
<sg-badge variant="info">Info</sg-badge>
<sg-badge variant="neutral">Neutral</sg-badge>
<sg-badge variant="purple">Purple</sg-badge>
<sg-badge variant="cyan">Cyan</sg-badge>

<!-- Sizes -->
<sg-badge size="xs">Extra Small</sg-badge>
<sg-badge size="sm">Small</sg-badge>
<sg-badge size="md">Medium</sg-badge>
<sg-badge size="lg">Large</sg-badge>

<!-- Styles -->
<sg-badge pill>Pill Shape</sg-badge>
<sg-badge outlined>Outlined</sg-badge>
<sg-badge soft>Soft/Subtle</sg-badge>

<!-- Status Dot -->
<sg-badge dot>With Dot</sg-badge>
<sg-badge dot pulse>Pulsing Dot</sg-badge>

<!-- Interactive -->
<sg-badge clickable>Clickable</sg-badge>

<!-- With Icon -->
<sg-badge>
  <sg-icon slot="icon" name="star"></sg-icon>
  Featured
</sg-badge>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'neutral' \| 'purple' \| 'cyan'` | `'primary'` | Color variant |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Badge size |
| `pill` | `boolean` | `false` | Fully rounded shape |
| `outlined` | `boolean` | `false` | Transparent with border |
| `soft` | `boolean` | `false` | Subtle/light background |
| `dot` | `boolean` | `false` | Show status dot |
| `pulse` | `boolean` | `false` | Animate dot with pulse |
| `clickable` | `boolean` | `false` | Make interactive |

## Slots

| Slot | Description |
|------|-------------|
| (default) | Badge content |
| `icon` | Icon before text |

## CSS Parts

| Part | Description |
|------|-------------|
| `badge` | The badge element |
| `icon` | Icon wrapper |
| `content` | Text content wrapper |

## License

MIT
npm package: @sage-box/breadcrumb
Description: Breadcrumb navigation component for SageBox
Author: adravilag
Latest version: 0.1.1

# sg-breadcrumb

Breadcrumb navigation component for SageBox.

## Features

- Multiple separator styles (chevron, slash, arrow, dot)
- Custom separator support
- Size variants (sm, md, lg)
- Active state detection
- Accessible navigation with ARIA
- Dark mode support

## Usage

### Basic

```html
<sg-breadcrumb>
  <sg-breadcrumb-item href="/">Home</sg-breadcrumb-item>
  <sg-breadcrumb-item href="/products">Products</sg-breadcrumb-item>
  <sg-breadcrumb-item active>Product Details</sg-breadcrumb-item>
</sg-breadcrumb>
```

### With Icons

```html
<sg-breadcrumb>
  <sg-breadcrumb-item href="/" icon="home">Home</sg-breadcrumb-item>
  <sg-breadcrumb-item href="/settings" icon="settings">Settings</sg-breadcrumb-item>
  <sg-breadcrumb-item active>Profile</sg-breadcrumb-item>
</sg-breadcrumb>
```

### Different Separators

```html
<sg-breadcrumb separator="slash">...</sg-breadcrumb>
<sg-breadcrumb separator="arrow">...</sg-breadcrumb>
<sg-breadcrumb separator="dot">...</sg-breadcrumb>
<sg-breadcrumb custom-separator="→">...</sg-breadcrumb>
```

### Sizes

```html
<sg-breadcrumb size="sm">...</sg-breadcrumb>
<sg-breadcrumb size="md">...</sg-breadcrumb>
<sg-breadcrumb size="lg">...</sg-breadcrumb>
```

## CSS Custom Properties

| Property | Description | Default |
|----------|-------------|---------|
| `--sg-breadcrumb-font-size` | Font size | `0.875rem` |
| `--sg-breadcrumb-gap` | Gap between items | `0.5rem` |
| `--sg-breadcrumb-color` | Text color | `#6b7280` |
| `--sg-breadcrumb-color-hover` | Hover color | `#6366f1` |
| `--sg-breadcrumb-color-active` | Active item color | `#111827` |
| `--sg-breadcrumb-separator-color` | Separator color | `#9ca3af` |

<!-- Auto Generated Below -->
npm package: @sage-box/card
Description: Card component for SageBox - Flexible container with variants, icons and actions
Author: adravilag
Latest version: 0.1.1

# sg-card

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `actionLabel` | `action-label` | Label for the action button in footer | `string` | `undefined` |
| `actionVariant` | `action-variant` | Variant for the action button | `"ghost" \| "primary" \| "secondary"` | `'primary'` |
| `cardTitle` | `card-title` | Card title displayed in the header | `string` | `undefined` |
| `clickable` | `clickable` | Makes the entire card clickable | `boolean` | `false` |
| `disabled` | `disabled` | Disables the card | `boolean` | `false` |
| `flat` | `flat` | Removes shadow from the card | `boolean` | `false` |
| `header` | `header` | Optional header text | `string` | `undefined` |
| `hoverable` | `hoverable` | Adds hover elevation effect | `boolean` | `false` |
| `href` | `href` | URL for navigation | `string` | `undefined` |
| `icon` | `icon` | Icon name to display | `string` | `undefined` |
| `iconColor` | `icon-color` | Icon color | `string` | `undefined` |
| `iconSize` | `icon-size` | Icon size in pixels | `number \| string` | `48` |
| `loading` | `loading` | Applies loading state | `boolean` | `false` |
| `size` | `size` | Size preset | `"lg" \| "md" \| "sm"` | `'md'` |
| `subtitle` | `subtitle` | Card subtitle | `string` | `undefined` |
| `target` | `target` | Target for href link | `string` | `'_self'` |
| `variant` | `variant` | Visual variant | `"default" \| "error" \| "gradient" \| "info" \| "outlined" \| "primary" \| "success" \| "warning"` | `'default'` |


## Events

| Event | Description | Type |
| --- | --- | --- |
| `sgAction` | Emitted when action button is clicked | `CustomEvent<void>` |
| `sgClick` | Emitted when card is clicked | `CustomEvent<void>` |


## Slots

| Slot | Description |
| --- | --- |
| | Default slot for card content |
| `"footer"` | Optional footer content |
| `"header"` | Optional header content |
| `"icon"` | Custom icon slot |
| `"media"` | Media content at top |


## Shadow Parts

| Part | Description |
| --- | --- |
| `"action"` | The action button |
| `"body"` | The body section |
| `"card"` | The main card container |
| `"footer"` | The footer section |
| `"header"` | The header section |
| `"icon"` | The icon wrapper |
| `"media"` | The media container |
| `"subtitle"` | The subtitle element |
| `"title"` | The title element |


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

*Built with [StencilJS](https://stenciljs.com/)*
npm package: @sage-box/core
Description: Core styles, tokens and utilities for SageBox components
Author: adravilag
Latest version: 0.1.1

# @sage-box/core

Core styles, design tokens and utilities for SageBox components.

## Installation

```bash
npm install @sage-box/core
```

## Usage

### CSS Tokens

Import the CSS file to get all design tokens as CSS custom properties:

```css
@import '@sage-box/core/styles';
```

Or in JavaScript:

```javascript
import '@sage-box/core/dist/styles/tokens.css';
```

### JavaScript Tokens

```javascript
import { colors, spacing, tokens } from '@sage-box/core';

// Use tokens in your code
console.log(colors.primary); // 'var(--sg-color-primary, #6366f1)'
```

### Utilities

```javascript
import { generateId, debounce, clamp } from '@sage-box/core';

const id = generateId('button'); // 'button-abc123'
const value = clamp(150, 0, 100); // 100
```

## Theming

Override CSS variables to customize the theme:

```css
:root {
  --sg-color-primary: #your-color;
  --sg-color-primary-hover: #your-hover-color;
}
```

### Dark Mode

Add `data-theme="dark"` or class `dark` to enable dark mode:

```html
<html data-theme="dark">
  <!-- or -->
<html class="dark">
```

## License

MIT © [adravilag](https://github.com/adravilag)
npm package: @sage-box/dropdown
Description: Dropdown component for SageBox - Accessible dropdown menus
Author: adravilag
Latest version: 0.1.1

# @sage-box/dropdown

> Dropdown component for SageBox - Accessible dropdown menus

## Installation

```bash
npm install @sage-box/dropdown @sage-box/core
```

## Usage

```html
<!-- Basic -->
<sg-dropdown>
  <button slot="trigger">Open Menu</button>
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</sg-dropdown>

<!-- With Header and Footer -->
<sg-dropdown align="end">
  <button slot="trigger">Settings</button>
  <div slot="header">User Settings</div>
  <button>Profile</button>
  <button>Preferences</button>
  <button>Logout</button>
  <div slot="footer">v1.0.0</div>
</sg-dropdown>

<!-- Positions and Alignments -->
<sg-dropdown position="top" align="center">
  <button slot="trigger">Top Center</button>
  <div>Content</div>
</sg-dropdown>

<!-- With Backdrop (Mobile) -->
<sg-dropdown show-backdrop>
  <button slot="trigger">Mobile Menu</button>
  <nav>...</nav>
</sg-dropdown>
```

## JavaScript API

```js
const dropdown = document.querySelector('sg-dropdown');

// Programmatic control
await dropdown.openDropdown();
await dropdown.closeDropdown();
await dropdown.toggle();

// Events
dropdown.addEventListener('sgOpen', () => console.log('Opened'));
dropdown.addEventListener('sgClose', () => console.log('Closed'));
dropdown.addEventListener('sgToggle', (e) => console.log('State:', e.detail));
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `open` | `boolean` | `false` | Whether dropdown is open |
| `align` | `'start' \| 'end' \| 'center'` | `'start'` | Horizontal alignment |
| `position` | `'bottom' \| 'top'` | `'bottom'` | Vertical position |
| `close-on-select` | `boolean` | `true` | Close on item click |
| `min-width` | `string` | `'200px'` | Minimum width |
| `max-height` | `string` | `'320px'` | Maximum height |
| `disabled` | `boolean` | `false` | Disable dropdown |
| `show-backdrop` | `boolean` | `false` | Show backdrop overlay |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant |

## Events

| Event | Detail | Description |
|-------|--------|-------------|
| `sgOpen` | - | Dropdown opened |
| `sgClose` | - | Dropdown closed |
| `sgToggle` | `boolean` | Open state changed |

## Methods

| Method | Returns | Description |
|--------|---------|-------------|
| `openDropdown()` | `Promise<void>` | Open dropdown |
| `closeDropdown()` | `Promise<void>` | Close dropdown |
| `toggle()` | `Promise<void>` | Toggle open state |

## Slots

| Slot | Description |
|------|-------------|
| `trigger` | Trigger element |
| (default) | Dropdown content |
| `header` | Header content |
| `footer` | Footer content |

## Keyboard Navigation

- `Enter` / `Space` - Toggle dropdown
- `Escape` - Close dropdown
- `ArrowDown` - Move focus down
- `ArrowUp` - Move focus up
- `Tab` - Close on tab out

## License

MIT
npm package: @sage-box/icons
Description: SVG Icon component for SageBox - A flexible, accessible icon system
Author: adravilag
Latest version: 0.1.1

# @sage-box/icons

A flexible, accessible SVG icon component from the SageBox library.

## Installation

```bash
npm install @sage-box/icons
```

## Usage

### Basic Usage

```html
<!-- Using custom element -->
<script type="module">
  import { defineCustomElements } from '@sage-box/icons/loader';
  defineCustomElements();
</script>

<sg-icon name="home"></sg-icon>
<sg-icon name="settings" size="32"></sg-icon>
<sg-icon name="heart" color="#ff0000"></sg-icon>
```

### With Framework

#### Vanilla JS / HTML

```javascript
import { defineCustomElements } from '@sage-box/icons/loader';
defineCustomElements();
```

```html
<sg-icon name="home"></sg-icon>
```

### Register Custom Icons

```javascript
import { registerIcons, registerIcon } from '@sage-box/icons';

// Register multiple icons
registerIcons({
  'my-logo': '<svg viewBox="0 0 24 24"><path d="M12..."/></svg>',
  'custom-icon': '<svg>...</svg>'
});

// Register single icon
registerIcon('my-custom-icon', '<svg viewBox="0 0 24 24">...</svg>');
```

### Load Icons from JSON

```html
<sg-icon name="my-icon" json-src="/assets/custom-icons.json"></sg-icon>
```

Or configure globally:

```javascript
import { SgIcon } from '@sage-box/icons';

// Set default JSON source for all icons
SgIcon.configure({ jsonSrc: '/assets/custom-icons.json' });

// Or pre-load icons
await SgIcon.loadIcons('/assets/custom-icons.json');
```

## CLI

The package includes a CLI for managing icons:

```bash
# Initialize icon configuration
npx sage-icons init

# Add icons from Iconify
npx sage-icons add mdi:home mdi:settings

# Browse and search icons
npx sage-icons browse
```

## Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `name` | `string` | - | Icon name from built-in library |
| `src` | `string` | - | URL to custom SVG file |
| `json-src` | `string` | - | URL to JSON file with icon definitions |
| `size` | `number \| string` | `24` | Icon size in pixels |
| `width` | `number \| string` | - | Width (overrides size) |
| `height` | `number \| string` | - | Height (overrides size) |
| `color` | `string` | `currentColor` | Icon color |
| `fill` | `string` | - | Alias for color |
| `stroke-width` | `number` | - | Stroke width for outline icons |
| `spin` | `boolean` | `false` | Enable spinning animation |
| `rotate` | `number` | - | Rotation angle in degrees |
| `flip-h` | `boolean` | `false` | Flip horizontally |
| `flip-v` | `boolean` | `false` | Flip vertically |
| `aria-label` | `string` | - | Accessible label |
| `decorative` | `boolean` | `false` | Mark as decorative (hidden from screen readers) |

## License

MIT © [adravilag](https://github.com/adravilag)
npm package: @sage-box/modal
Description: Dialog modal component using native HTML dialog - SageBox component
Author: adravilag
Latest version: 0.1.1

# @sage-box/modal

Dialog modal component using native HTML dialog

## Installation

```bash
npm install @sage-box/modal
```

## Usage

### HTML

```html
<script type="module">
  import { defineCustomElements } from '@sage-box/modal/loader';
  defineCustomElements();
</script>

<sg-modal>Content</sg-modal>
```

### React

```jsx
import '@sage-box/modal';

function App() {
  return <sg-modal>Content</sg-modal>;
}
```

### Angular

```typescript
import '@sage-box/modal';

@Component({
  template: `<sg-modal>Content</sg-modal>`
})
export class AppComponent {}
```

## Properties

| Property  | Type                                    | Default     | Description       |
|-----------|-----------------------------------------|-------------|-------------------|
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Component variant |

## Slots

| Slot      | Description            |
|-----------|------------------------|
| (default) | Main content           |

## CSS Custom Properties

| Property              | Description        |
|-----------------------|--------------------|
| `--sg-modal-color` | Main color        |

## License

MIT
npm package: @sage-box/skeleton
Description: Skeleton component for SageBox - Loading placeholder animations
Author: adravilag
Latest version: 0.1.1

# @sage-box/skeleton

> Skeleton component for SageBox - Loading placeholder animations

## Installation

```bash
npm install @sage-box/skeleton @sage-box/core
```

## Usage

```html
<!-- Text placeholder -->
<sg-skeleton variant="text" width="200px" height="1rem"></sg-skeleton>

<!-- Rectangle placeholder (cards, images) -->
<sg-skeleton variant="rect" width="100%" height="200px"></sg-skeleton>

<!-- Circle placeholder (avatars) -->
<sg-skeleton variant="circle" width="48px" height="48px"></sg-skeleton>

<!-- Different animations -->
<sg-skeleton animation="shimmer">Shimmer (default)</sg-skeleton>
<sg-skeleton animation="pulse">Pulse effect</sg-skeleton>
<sg-skeleton animation="none">No animation</sg-skeleton>
```

## Card Loading Example

```html
<div class="card">
  <sg-skeleton variant="rect" width="100%" height="200px"></sg-skeleton>
  <div class="card-body">
    <sg-skeleton variant="text" width="60%" height="1.5rem"></sg-skeleton>
    <sg-skeleton variant="text" width="100%" height="1rem"></sg-skeleton>
    <sg-skeleton variant="text" width="80%" height="1rem"></sg-skeleton>
  </div>
</div>
```

## User Profile Example

```html
<div class="profile">
  <sg-skeleton variant="circle" width="64px" height="64px"></sg-skeleton>
  <div class="info">
    <sg-skeleton variant="text" width="120px" height="1.25rem"></sg-skeleton>
    <sg-skeleton variant="text" width="80px" height="0.875rem"></sg-skeleton>
  </div>
</div>
```

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `variant` | `'text' \| 'rect' \| 'circle'` | `'text'` | Shape variant |
| `width` | `string` | `'100%'` | Width of skeleton |
| `height` | `string` | `'1rem'` | Height of skeleton |
| `animation` | `'shimmer' \| 'pulse' \| 'none'` | `'shimmer'` | Animation type |

## Accessibility

The skeleton component includes:
- `aria-busy="true"` - Indicates loading state
- `aria-live="polite"` - Announces when content is ready

## License

MIT
npm package: @sage-box/stats-card
Description: Stats card component for SageBox - Display metrics and statistics
Author: adravilag
Latest version: 0.1.1

# sg-stats-card

Statistics card component for displaying metrics and KPIs.

## Features

- Color variants (primary, success, warning, error, info, purple, cyan)
- Main value with unit
- Description with status indicator
- Watermark icon background
- Trend indicator (up/down)
- Additional stats breakdown
- Loading skeleton
- Staggered animation support
- Dark mode

## Usage

### Basic

```html
<sg-stats-card
  title="Total Users"
  value="1,234"
  description="Active this month"
  icon="users"
  color="primary">
</sg-stats-card>
```

### With Unit and Trend

```html
<sg-stats-card
  title="Revenue"
  value="45,678"
  unit="€"
  trend="+12%"
  trend-positive
  description="vs last month"
  icon="chart"
  color="success">
</sg-stats-card>
```

### With Stats Breakdown

```html
<sg-stats-card
  title="Tasks"
  value="128"
  description="In progress"
  icon="clipboard"
  color="info"
  stats='[
    {"label": "Completed", "value": 89, "color": "success"},
    {"label": "Pending", "value": 39, "color": "warning"}
  ]'>
</sg-stats-card>
```

### Staggered Animation

```html
<sg-stats-card title="Card 1" value="100" animation-delay="0"></sg-stats-card>
<sg-stats-card title="Card 2" value="200" animation-delay="100"></sg-stats-card>
<sg-stats-card title="Card 3" value="300" animation-delay="200"></sg-stats-card>
```

### Loading State

```html
<sg-stats-card loading></sg-stats-card>
```

## CSS Custom Properties

| Property | Description | Default |
|----------|-------------|---------|
| `--sg-stats-card-bg` | Background color | `#ffffff` |
| `--sg-stats-card-border` | Border color | `#e5e7eb` |
| `--sg-stats-card-radius` | Border radius | `0.75rem` |
| `--sg-stats-card-accent` | Accent color | `#6366f1` |

<!-- Auto Generated Below -->
npm package: @sage-box/theme-toggle
Description: Theme toggle component for SageBox - Dark/light mode switcher
Author: adravilag
Latest version: 0.1.1

# @sage-box/theme-toggle

> Theme toggle component for SageBox - Dark/light mode switcher

## Installation

```bash
npm install @sage-box/theme-toggle @sage-box/core
```

## Usage

```html
<!-- Basic -->
<sg-theme-toggle></sg-theme-toggle>

<!-- Set initial theme -->
<sg-theme-toggle theme="dark"></sg-theme-toggle>
<sg-theme-toggle theme="light"></sg-theme-toggle>
<sg-theme-toggle theme="system"></sg-theme-toggle>

<!-- Sizes -->
<sg-theme-toggle size="sm"></sg-theme-toggle>
<sg-theme-toggle size="md"></sg-theme-toggle>
<sg-theme-toggle size="lg"></sg-theme-toggle>
```

## JavaScript

```js
const toggle = document.querySelector('sg-theme-toggle');

// Listen for theme changes
toggle.addEventListener('sgThemeChange', (e) => {
  console.log('Theme changed to:', e.detail);
});

// Programmatically set theme
toggle.theme = 'dark';
```

## Theme Modes

| Mode | Description |
|------|-------------|
| `light` | Force light theme |
| `dark` | Force dark theme |
| `system` | Follow OS preference |

The component automatically:
- Sets `data-theme` attribute on `<html>` element
- Listens for system preference changes when in `system` mode
- Shows "auto" badge when in system mode

## Properties

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Current theme mode |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |

## Events

| Event | Detail | Description |
|-------|--------|-------------|
| `sgThemeChange` | `ThemeMode` | Emitted when theme changes |

## CSS Custom Properties

| Property | Description |
|----------|-------------|
| `--sg-bg-secondary` | Button background |
| `--sg-bg-tertiary` | Button hover background |
| `--sg-text-primary` | Icon color |
| `--sg-accent` | Badge background |
| `--sg-focus-ring` | Focus outline color |

## Styling Your App

Use the `data-theme` attribute to style your app:

```css
[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #1e293b;
}

[data-theme='dark'] {
  --bg-color: #0f172a;
  --text-color: #f1f5f9;
}
```

## License

MIT
npm package: @sage-box/tooltip
Description: Tooltip component for SageBox - Contextual information on hover/focus
Author: adravilag
Latest version: 0.1.1

# sg-tooltip

Tooltip component for displaying contextual information.

## Features

- Multiple positions (top, bottom, left, right)
- Trigger modes (hover, click, focus, manual)
- Visual variants (default, dark, light, primary, success, warning, error)
- Show/hide delays
- Arrow pointer
- Interactive mode
- Accessibility support

## Usage

### Basic

```html
<sg-tooltip text="This is a helpful tooltip">
  <button>Hover me</button>
</sg-tooltip>
```

### Positions

```html
<sg-tooltip text="Top" position="top">...</sg-tooltip>
<sg-tooltip text="Bottom" position="bottom">...</sg-tooltip>
<sg-tooltip text="Left" position="left">...</sg-tooltip>
<sg-tooltip text="Right" position="right">...</sg-tooltip>
```

### Trigger Modes

```html
<!-- Hover (default) -->
<sg-tooltip text="Hover tooltip" trigger="hover">...</sg-tooltip>

<!-- Click -->
<sg-tooltip text="Click to toggle" trigger="click">...</sg-tooltip>

<!-- Focus -->
<sg-tooltip text="Focus tooltip" trigger="focus">...</sg-tooltip>

<!-- Manual control -->
<sg-tooltip text="Manual" trigger="manual" open>...</sg-tooltip>
```

### Variants

```html
<sg-tooltip text="Primary" variant="primary">...</sg-tooltip>
<sg-tooltip text="Success" variant="success">...</sg-tooltip>
<sg-tooltip text="Warning" variant="warning">...</sg-tooltip>
<sg-tooltip text="Error" variant="error">...</sg-tooltip>
```

### With Custom Content

```html
<sg-tooltip>
  <button>Info</button>
  <div slot="content">
    <strong>Rich content</strong>
    <p>With HTML support</p>
  </div>
</sg-tooltip>
```

### Programmatic Control

```javascript
const tooltip = document.querySelector('sg-tooltip');

// Show tooltip
await tooltip.show();

// Hide tooltip
await tooltip.hide();

// Toggle
await tooltip.toggle();
```

## CSS Custom Properties

| Property | Description | Default |
|----------|-------------|---------|
| `--sg-tooltip-bg` | Background color | `#1f2937` |
| `--sg-tooltip-color` | Text color | `#ffffff` |
| `--sg-tooltip-radius` | Border radius | `0.375rem` |
| `--sg-tooltip-padding` | Content padding | `0.5rem 0.75rem` |
| `--sg-tooltip-font-size` | Font size | `0.8125rem` |
| `--sg-tooltip-shadow` | Box shadow | `0 4px 6px...` |
| `--sg-tooltip-offset` | Distance from trigger | `8px` |

<!-- Auto Generated Below -->
npm package: @sage-cli/cli-utils
Description: Base command class and utilities for sage-cli.
Author: QWp6t
Latest version: 1.0.0-alpha.1

Sage CLI Utils
================

Base command class and utilities for sage-cli.

[![Version](https://img.shields.io/npm/v/@sage-cli/cli-utils.svg)](https://npmjs.org/package/@sage-cli/cli-utils)
[![Known Vulnerabilities](https://snyk.io/test/npm/@sage-cli/cli-utils/badge.svg)](https://snyk.io/test/npm/@sage-cli/cli-utils)
[![Downloads/week](https://img.shields.io/npm/dw/@sage-cli/cli-utils.svg)](https://npmjs.org/package/@sage-cli/cli-utils)
[![License](https://img.shields.io/npm/l/@sage-cli/cli-utils.svg)](https://github.com/roots/sage-cli/blob/master/packages/cli-utils/package.json)
npm package: @sage-cli/plugin-preset
Description: Swap the front-end scaffolding for the theme
Author: QWp6t
Latest version: 1.0.0-alpha.1

Preset plugin for [`sage`](https://roots.io/sage/cli)
================

Swap the front-end scaffolding for the theme.

[![Version](https://img.shields.io/npm/v/@sage-cli/plugin-preset.svg)](https://npmjs.org/package/@sage-cli/plugin-preset)
[![Known Vulnerabilities](https://snyk.io/test/npm/@sage-cli/plugin-preset/badge.svg)](https://snyk.io/test/npm/@sage-cli/plugin-preset)
[![Downloads/week](https://img.shields.io/npm/dw/@sage-cli/plugin-preset.svg)](https://npmjs.org/package/@sage-cli/plugin-preset)
[![License](https://img.shields.io/npm/l/@sage-cli/plugin-preset.svg)](https://github.com/roots/sage-cli/blob/master/packages/preset/package.json)


<!-- toc -->

<!-- tocstop -->

<!-- usage -->
```sh-session
$ npm install -g @sage-cli/plugin-preset
$ sage COMMAND
running command...
$ sage (-v|--version|version)
@sage-cli/plugin-preset/1.0.0-alpha.1 linux-x64 node-v10.15.3
$ sage --help [COMMAND]
USAGE
  $ sage COMMAND
...
```
<!-- usagestop -->

<!-- commands -->
* [`sage preset`](#sage-preset)

## `sage preset`

Swap the front-end scaffolding for the theme

```
USAGE
  $ sage preset

OPTIONS
  -Y, --suppress    Suppress warnings when overwriting or deleting files
  --clean           Uninstall all presets before installing specified preset.
  --force           Disregard all failsafes.
  --no-interaction  Do not ask any interactive questions
  --path=path       Custom path to Sage theme
  --uninstall       Uninstall specified preset.

EXAMPLE
  $ sage preset:bootstrap
```

_See code: [src/commands/preset/index.ts](https://github.com/roots/sage-cli/blob/v1.0.0-alpha.1/packages/preset/src/commands/preset/index.ts)_
<!-- commandsstop -->
npm package: @sage-cli/plugin-preset-bootstrap
Description: Performs post-installation operations for Sage.
Author: QWp6t
Latest version: 1.0.0-alpha.1

Preset plugin for [`sage`](https://roots.io/sage/cli)
================

Swap the front-end scaffolding for the theme.

[![Version](https://img.shields.io/npm/v/@sage-cli/plugin-preset-bootstrap.svg)](https://npmjs.org/package/@sage-cli/plugin-preset-bootstrap)
[![Known Vulnerabilities](https://snyk.io/test/npm/@sage-cli/plugin-preset-bootstrap/badge.svg)](https://snyk.io/test/npm/@sage-cli/plugin-preset-bootstrap)
[![Downloads/week](https://img.shields.io/npm/dw/@sage-cli/plugin-preset-bootstrap.svg)](https://npmjs.org/package/@sage-cli/plugin-preset-bootstrap)
[![License](https://img.shields.io/npm/l/@sage-cli/plugin-preset-bootstrap.svg)](https://github.com/roots/sage-cli/blob/master/packages/preset-bootstrap/package.json)


<!-- toc -->

<!-- tocstop -->

<!-- usage -->
```sh-session
$ npm install -g @sage-cli/plugin-preset-bootstrap
$ sage COMMAND
running command...
$ sage (-v|--version|version)
@sage-cli/plugin-preset-bootstrap/1.0.0-alpha.1 linux-x64 node-v10.15.3
$ sage --help [COMMAND]
USAGE
  $ sage COMMAND
...
```
<!-- usagestop -->

<!-- commands -->
* [`sage preset:bootstrap`](#sage-presetbootstrap)

## `sage preset:bootstrap`

Use Bootstrap front-end scaffolding.

```
USAGE
  $ sage preset:bootstrap

OPTIONS
  -Y, --suppress    Suppress warnings when overwriting or deleting files
  --clean           Uninstall all presets before installing specified preset.
  --force           Disregard all failsafes.
  --no-interaction  Do not ask any interactive questions
  --path=path       Custom path to Sage theme
  --uninstall       Uninstall specified preset.

EXAMPLE
  $ sage preset:bootstrap
```

_See code: [src/commands/preset/bootstrap.ts](https://github.com/roots/sage-cli/blob/v1.0.0-alpha.1/packages/preset-bootstrap/src/commands/preset/bootstrap.ts)_
<!-- commandsstop -->
npm package: @sage-cli/plugin-preset-none
Description: Performs post-installation operations for Sage.
Author: QWp6t
Latest version: 1.0.0-alpha.1

Preset plugin for [`sage`](https://roots.io/sage/cli)
================

Swap the front-end scaffolding for the theme.

[![Version](https://img.shields.io/npm/v/@sage-cli/plugin-preset-none.svg)](https://npmjs.org/package/@sage-cli/plugin-preset-none)
[![Known Vulnerabilities](https://snyk.io/test/npm/@sage-cli/plugin-preset-none/badge.svg)](https://snyk.io/test/npm/@sage-cli/plugin-preset-none)
[![Downloads/week](https://img.shields.io/npm/dw/@sage-cli/plugin-preset-none.svg)](https://npmjs.org/package/@sage-cli/plugin-preset-none)
[![License](https://img.shields.io/npm/l/@sage-cli/plugin-preset-none.svg)](https://github.com/roots/sage-cli/blob/master/packages/preset-none/package.json)


<!-- toc -->

<!-- tocstop -->

<!-- usage -->
```sh-session
$ npm install -g @sage-cli/plugin-preset-none
$ sage COMMAND
running command...
$ sage (-v|--version|version)
@sage-cli/plugin-preset-none/1.0.0-alpha.1 linux-x64 node-v10.15.3
$ sage --help [COMMAND]
USAGE
  $ sage COMMAND
...
```
<!-- usagestop -->

<!-- commands -->
* [`sage preset:none`](#sage-presetnone)

## `sage preset:none`

Vanilla front-end scaffolding.

```
USAGE
  $ sage preset:none

OPTIONS
  -Y, --suppress    Suppress warnings when overwriting or deleting files
  --clean           Uninstall all presets before installing specified preset.
  --force           Disregard all failsafes.
  --no-interaction  Do not ask any interactive questions
  --path=path       Custom path to Sage theme
  --uninstall       Uninstall specified preset.

ALIASES
  $ sage preset:vanilla

EXAMPLES
  $ sage preset:none
  $ sage preset:vanilla
```

_See code: [src/commands/preset/none.ts](https://github.com/roots/sage-cli/blob/v1.0.0-alpha.1/packages/preset-none/src/commands/preset/none.ts)_
<!-- commandsstop -->
npm package: @sage-cli/plugin-setup
Description: Performs post-installation operations for Sage.
Author: QWp6t
Latest version: 1.0.0-alpha.1

Preset plugin for [`sage`](https://roots.io/sage/cli)
================

Swap the front-end scaffolding for the theme.

[![Version](https://img.shields.io/npm/v/@sage-cli/plugin-preset.svg)](https://npmjs.org/package/@sage-cli/plugin-preset)
[![Known Vulnerabilities](https://snyk.io/test/npm/@sage-cli/plugin-preset/badge.svg)](https://snyk.io/test/npm/@sage-cli/plugin-preset)
[![Downloads/week](https://img.shields.io/npm/dw/@heroku-cli/plugin-status.svg)](https://npmjs.org/package/@sage-cli/plugin-preset)
[![License](https://img.shields.io/npm/l/@sage-cli/plugin-preset.svg)](https://github.com/roots/sage-cli/blob/master/packages/preset/package.json)


<!-- toc -->

<!-- tocstop -->

<!-- usage -->
```sh-session
$ npm install -g @sage-cli/plugin-setup
$ sage COMMAND
running command...
$ sage (-v|--version|version)
@sage-cli/plugin-setup/1.0.0-alpha.1 linux-x64 node-v10.15.3
$ sage --help [COMMAND]
USAGE
  $ sage COMMAND
...
```
<!-- usagestop -->

<!-- commands -->
* [`sage setup`](#sage-setup)

## `sage setup`

Sets theme headers and other metadata.

```
USAGE
  $ sage setup

OPTIONS
  -Y, --suppress                 Suppress warnings when overwriting or deleting files
  -a, --author=author            Author
  -d, --description=description  Description
  -i, --text_domain=text_domain  Text Domain
  -l, --license=license          Theme license
  -n, --name=name                Theme Name
  -p, --template=template        Template (parent theme)
  -t, --tags=tags                Tags (comma separated)
  -u, --uri=uri                  Theme URI
  -v, --version=version          Theme Version
  --author_uri=author_uri        Author URI
  --banner=banner                Banner (appears after the headers)
  --force                        Disregard all failsafes.
  --license_uri=license_uri      License URI
  --no-interaction               Do not ask any interactive questions
  --path=path                    Custom path to Sage theme

EXAMPLE
  $ sage setup --name=Sage --version=10.0.0 --uri=https://roots.io/ --description='Sage is a WordPress starter theme' 
  --author='Roots <https://roots.io/>' --license='MIT <http://opensource.org/licenses/MIT>' 
  --tags=wordpress,sage,bootstrap
```

_See code: [src/commands/setup/index.ts](https://github.com/roots/sage-cli/blob/v1.0.0-alpha.1/packages/setup/src/commands/setup/index.ts)_
<!-- commandsstop -->
npm package: @sage-protocol/sage-plugin
Description: OpenCode plugin for Sage: capture + suggest in one module
Latest version: 0.1.7

# Sage Plugin (OpenCode)

OpenCode plugin for Sage Protocol. Captures prompt/response pairs for RLM feedback and provides inline skill suggestions during coding sessions.

## What It Does

- **Prompt Capture** - Silently records prompt/response pairs with session metadata (model, tokens, cost)
- **Inline Suggestions** - Debounced skill and prompt suggestions injected into the OpenCode TUI
- **RLM Feedback** - Tracks whether suggestions were accepted, steered, or rejected within a 30-second correlation window
- **Session Tracking** - Maintains session and model context across streaming responses

## Install

```bash
mkdir -p ~/.config/opencode/plugin/@sage-protocol
cp -r sage-plugin ~/.config/opencode/plugin/@sage-protocol/
```

Add the plugin to your `opencode.json`:

```json
{
  "plugin": ["@sage-protocol/sage-plugin"],
  "mcp": {
    "sage": {
      "type": "local",
      "command": ["sage", "mcp", "start"],
      "enabled": true
    }
  }
}
```

Or run `sage init --opencode` to configure automatically.

## Configuration

| Variable                   | Default | Description                                  |
| -------------------------- | ------- | -------------------------------------------- |
| `SAGE_BIN`                 | `sage`  | Path to the sage binary                      |
| `SAGE_SUGGEST_LIMIT`       | `3`     | Max suggestions per request                  |
| `SAGE_SUGGEST_DEBOUNCE_MS` | `800`   | Debounce delay for TUI suggestions           |
| `SAGE_SUGGEST_PROVISION`   | `1`     | Set `0` to skip MCP provisioning             |
| `SAGE_RLM_FEEDBACK`        | `1`     | Set `0` to disable RLM feedback tracking     |
| `SAGE_PLUGIN_DRY_RUN`      | `0`     | Set `1` to disable spawning sage (for tests) |

Notes:

- The plugin passes user prompts via `PROMPT` and assistant responses via `SAGE_RESPONSE` when invoking `sage capture hook prompt|response`.

## Requirements

- Sage CLI on PATH (or set `SAGE_BIN`)
- Bun v1.3+
- OpenCode

## Development

```bash
bun install
bun run lint
bun test
```

## License

MIT